jQuery 淡入淡出

演示 jQuery fadeIn() 方法：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script>
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     $("#div1").fadeIn();
 9     $("#div2").fadeIn("slow");
10     $("#div3").fadeIn(3000);
11   });
12 });
13 </script>
14 </head>
15 <!-- 点击之后淡入三个不同颜色的div-->
16 <body>
17 <p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
18 <button>点击淡入 div 元素。</button>
19 <br><br>
20 <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
21 <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
22 <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
23 
24 </body>
25 </html>

演示 jQuery fadeOut() 方法：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script>
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     $("#div1").fadeOut();
 9     $("#div2").fadeOut("slow");
10     $("#div3").fadeOut(3000);
11   });
12 });
13 </script>
14 </head>
15 <!-- 点击之后将三个不同颜色的div淡出-->
16 <body>
17 <p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
18 <button>点击淡出 div 元素。</button>
19 <br><br>
20 <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
21 <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
22 <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
23 
24 </body>
25 </html>

演示fadeToggle() 方法：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <script>
 7 $(document).ready(function(){
 8     $("button").click(function(){
 9         $("#div1").fadeToggle();
10         $("#div2").fadeToggle("slow");
11         $("#div3").fadeToggle(3000);
12     });
13 });
14 </script>
15 </head>
16 <body>
17 <!-- 循环淡入/淡出-->
18 <p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
19 <button>点击淡入/淡出</button>
20 <br><br>
21 <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
22 <br>
23 <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
24 <br>
25 <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
26 
27 </body>
28 </html>

jQuery 淡入淡出

推荐阅读