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

Bertha 。 2024-02-17 14:10 13阅读 0赞

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

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

fadeIn()方法

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

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

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

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("button").click(function()\{
2.  $("\#div1").fadeIn();
3.  $("\#div2").fadeIn("slow");
4.  $("\#div3").fadeIn(3000);
5.  \});

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

fadeOut()方法

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

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

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

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("button").click(function()\{
2.  $("\#div1").fadeOut();
3.  $("\#div2").fadeOut("slow");
4.  $("\#div3").fadeOut(3000);
5.  \});

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

fadeToggle()方法

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

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

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

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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>

<!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>

[![20130307001][]][20130307001]

fadeTo()方法

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

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

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

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("button").click(function()\{
2.  $("\#div1").fadeTo("slow",0.15);
3.  $("\#div2").fadeTo("slow",0.4);
4.  $("\#div3").fadeTo("slow",0.7);
5.  \});

[view plain]: http://blog.csdn.net/mapdigit/article/details/8648968#
[20130307001]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2013/03/20130307001.png