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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> .divFrame{border: solid 1px #666;width: 188px;text-align: center;} .divFrame .divTitle{background-color: #eee;padding: 5px 0;} .divFrame .divContent{padding: 5px 0;} .divFrame .divContent .box{width: 100px;height: 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: 80px;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script> <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("淡出成功！"); }); }); }) </script> </head> <body> <div class="divFrame"> <div class="divTitle"> <input type="button" value="fadeIn" id="Button1" class="btn" /> <input type="button" value="fadeOut" id="Button2" class="btn" /> </div> <div class="divContent"> <div class="divTip"></div> <div class="box"></div> </div> </div> </body> </html>
结果如下图所示：
