jQuery 淡入淡出

通過 jQuery，您可以實作元素的淡入淡出效果。

jQuery 擁有下面四種 fade 方法：

fadeIn()
     fadeOut()
     fadeToggle()
     fadeTo()      

jQuery fadeIn() 用于淡入已隐藏的元素。

文法：

$(selector).fadeIn(speed,callback);      

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函數名稱。

下面的例子示範了帶有不同參數的 fadeIn() 方法：

執行個體

$("button").click(function(){
   $("#div1").fadeIn();
   $("#div2").fadeIn("slow");
   $("#div3").fadeIn(3000);
 });      

jQuery fadeOut() 方法用于淡出可見元素。

文法：

$(selector).fadeOut(speed,callback);      

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函數名稱。

下面的例子示範了帶有不同參數的 fadeOut() 方法：

執行個體

$("button").click(function(){
   $("#div1").fadeOut();
   $("#div2").fadeOut("slow");
   $("#div3").fadeOut(3000);
 });      

$("button").click(function(){
   $("#div1").fadeToggle();
   $("#div2").fadeToggle("slow");
   $("#div3").fadeToggle(3000);
 });      

$(selector).fadeTo(speed,opacity,callback);      

$("button").click(function(){
   $("#div1").fadeTo("slow",0.15);
   $("#div2").fadeTo("slow",0.4);
   $("#div3").fadeTo("slow",0.7);
 });