淡入淡出效果
jQuery 提供了下面幾種方法可以實現顯示的淡入淡出效果：
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
fadeIn()方法
fadeIn()實現淡入效果，其基本語法如下：
$(selector).fadeIn(speed,callback);
可選參數 speed 給出了淡入效果的時間，可以使用 “slow”,”fast” 或是數值（微秒） 第二個可選參數為回調函數，在 fadeIn()方法結束后調用。
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
fadeOut()方法
fadeOut()實現淡出效果，其基本語法如下：
$(selector).fadeOut(speed,callback);
可選參數 speed 給出了淡入效果的時間，可以使用 “slow”,”fast” 或是數值（微秒） 第二個可選參數為回調函數，在 fadeOut()方法結束后調用。
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
fadeToggle()方法
fadeToggle()交替進行 fadeIn()和 fadeOut()，如果元素是淡出的，那么 fadeToggle()將淡入該元素，如果之前是淡入的，fadeToggle 將淡出該元素。
其基本語法如下：
$(selector).fadeToggle(speed,callback);
可選參數 speed 給出了淡入效果的時間，可以使用 “slow”,”fast” 或是數值（微秒） 第二個可選參數為回調函數，在 fadeToggle()方法結束后調用。
下面例子，點擊按鈕之后，可以交替淡出淡入三個矩形。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js"></script> <script> $(document).ready(function () { $("button").click(function () { $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); </script> </head> <body> <p>Demonstrate fadeToggle() with different speed parameters.</p> <button>Click to fade in/out boxes</button> <br> <br> <div id="div1" style="width: 80px; height: 80px; background-color: red;"></div> <br> <div id="div2" style="width: 80px; height: 80px; background-color: green;"></div> <br> <div id="div3" style="width: 80px; height: 80px; background-color: blue;"></div> </body> </html>
fadeTo()方法
fadeTo()實現淡化到指定的透明度，其基本語法如下
$(selector).fadeTo(speed,opacity,callback);
必需參數 speed 給出了淡入效果的時間，可以使用 “slow”,”fast” 或是數值（微秒） 第二個必須參數為透明度，值域為0到1之間。
可選參數為回調函數，在 fadeIn()方法結束后調用。
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});