演示 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>
时间： 2024-10-28 21:59:21