jQuery 入门教程(6): 淡入淡出效果

jQuery 提供了下面几种方法可以实现显示的淡入淡出效果:

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

fadeIn()方法

fadeIn() 实现淡入效果,其基本语法如下:

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

可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。

[javascript]  view plain copy print ?
  1. $("button").click(function(){  
  2.   $("#div1").fadeIn();  
  3.   $("#div2").fadeIn("slow");  
  4.   $("#div3").fadeIn(3000);  
  5. });  

fadeOut()方法

fadeOut() 实现淡出效果,其基本语法如下:

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

可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。

[javascript]  view plain copy print ?
  1. $("button").click(function(){  
  2.   $("#div1").fadeOut();  
  3.   $("#div2").fadeOut("slow");  
  4.   $("#div3").fadeOut(3000);  
  5. });  

fadeToggle()方法

fadeToggle() 交替进行fadeIn()和fadeOut(),如果元素是淡出的,那么fadeToggle()将淡入该元素,如果之前是淡入的,fadeToggle将淡出该元素。
其基本语法如下:

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

可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。
下面例子,点击按钮之后,可以交替淡出淡入三个矩形。

[javascript]  view plain copy print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>JQuery Demo</title>  
  6.     <script src="scripts/jquery-1.9.1.js"></script>  
  7.     <script>  
  8.         $(document).ready(function () {  
  9.             $("button").click(function () {  
  10.                 $("#div1").fadeToggle();  
  11.                 $("#div2").fadeToggle("slow");  
  12.                 $("#div3").fadeToggle(3000);  
  13.             });  
  14.         });  
  15.     </script>  
  16. </head>  
  17. <body>  
  18.   
  19.     <p>Demonstrate fadeToggle() with different speed parameters.</p>  
  20.     <button>Click to fade in/out boxes</button>  
  21.     <br>  
  22.     <br>  
  23.   
  24.     <div id="div1" style="width: 80px; height: 80px;  
  25.         background-color: red;"></div>  
  26.     <br>  
  27.     <div id="div2" style="width: 80px; height: 80px;  
  28.         background-color: green;"></div>  
  29.     <br>  
  30.     <div id="div3" style="width: 80px; height: 80px;  
  31.      background-color: blue;"></div>  
  32.   
  33. </body>  
  34. </html>  

jQuery 入门教程(6): 淡入淡出效果_第1张图片

fadeTo()方法

fadeTo() 实现淡化到指定的透明度,其基本语法如下:

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

必需参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个必须参数为透明度,值域为0到1之间。
可选参数为回调函数,在fadeIn()方法结束后调用。

[javascript]  view plain copy print ?
  1. $("button").click(function(){  
  2.   $("#div1").fadeTo("slow",0.15);  
  3.   $("#div2").fadeTo("slow",0.4);  
  4.   $("#div3").fadeTo("slow",0.7);  
  5. });  

你可能感兴趣的:(jQuery 入门教程(6): 淡入淡出效果)