show()和hide()方法与fadeIn()和fadeOut()方法相比较，相同之处是都是切换元素的显示状态，不同之处在于，前者的动画效果使用元素的width与height属性都发生了变化，而后者仅是改变元素的透明度，并不修改其他属性。fadeIn()和fadeOut()方法调用格式如下。
fadeIn()方法的格式：fadeIn(speed,【callback】)
该方法的功能是改变所选元素的透明度，实现淡入的动画效果，并在完成时，可执行一个回调的函数。参数speed为动画效果的速度，可选参数callback为动画完成时执行的函数。
fadeOut()方法的格式：fadeOut(speed,【callback】)
该方法的功能是改变所选元素的透明度，实现淡出的动画效果，其包含参数的功能与fadeIn()方法一样。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
[/span>html xmlns="" xml:lang="en"
[/span>head
[/span>meta http-equiv="Content-Type" content="text/html;charset=UTF-8"
[/span>title
[/span>style
.divFrame{border: solid 1px #666;Width＜/span>: 188px;text-align: center;}
.divFrame .divTitle{background-color: #eee;padding: 5px 0;}
.divFrame .divContent{padding: 5px 0;}
//代码效果参考： http://www.lyjsj.net.cn/wx/art_23000.html
.divFrame .divContent .box{Width＜/span>: 100px;Height＜/span>: 100px;border: solid 1px #eee;padding: 2px;background-color: orange;}
.divFrame .divTip{position: absolute;padding: 120px 0 0 60px;font-size: 13px;font-weight: bold;}
.btn{border: solid 1px #666;padding: 2px;Width＜/span>: 80px;}
[/span>script type="text/javascript" src=""
[/span>script
$(function(){
$box = $(".box"); //获取色块对象
$tip = $(".divTip"); //获取提示元素对象
$("input:eq(0)").click(function(){
$tip.html(""); //清空提示内容
//在2000毫秒中淡入色块，并执行一个回调函数
$box.fadeIn(2000,function(){
$tip.html("淡入成功！");
});
});
$("input:eq(1)").click(function(){
$tip.html("");
$box.fadeOut(2000,function(){
$tip.html("淡出成功！");
});
});
})
[/span>body
[/span>div class="divFrame"
[/span>div class="divTitle"
[/span>input type="button" value="fadeIn" id="Button1" class="btn" />
[/span>input type="button" value="fadeOut" id="Button2" class="btn" />
[/span>div class="divContent"
[/span>div class="divTip"
[/span>div class="box"
结果如下图所示：
高否？富否？帅否？
否？
滚去学习！
