JQuery动画之淡入淡出动画

1. 淡入动画

1.1 不带参数的淡入动画

格式：

$(selector).fadeIn();

示例代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeIn() Demo</title>
    <style type="text/css">
        div{
             300px;
            height: 300px;
            display: none;
            background-color: #ff6700;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $("div").fadeIn();
            });
        })
    </script>
</head>
<body>
    <button>淡入</button>
    <div></div>
</body>
</html>

1.2 带数值参数的淡入动画

格式：

$(selector).fadeIn(Number);

参数： Number为毫秒值， 1s = 1000ms

代码示例：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>fadeIn() Demo</title>
 6     <style type="text/css">
 7         div{
 8              300px;
 9             height: 300px;
10             display: none;
11             background-color: #ff6700;
12         }
13     </style>
14     <script type="text/javascript" src="jquery.js"></script>
15     <script>
16         $(function () {
17             $("button").click(function () {
18                 $("div").fadeIn(2000);
19             });
20         })
21     </script>
22 </head>
23 <body>
24     <button>淡入</button>
25     <div></div>
26 </body>
27 </html>

1.3 带String参数的淡入动画

格式：

$(selector).fadeIn(String);

参数(String): 参数有三个值可选，分别是slow(600ms)， normal(400ms)， fast(200ms)。

示例代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>fadeIn() Demo</title>
 6     <style type="text/css">
 7         div{
 8              300px;
 9             height: 300px;
10             display: none;
11             background-color: #ff6700;
12         }
13     </style>
14     <script type="text/javascript" src="jquery.js"></script>
15     <script>
16         $(function () {
17             $("button").click(function () {
18                 //以slow speed fadein
19                 $("div").fadeIn("slow");
20                 //以normal speed fadein
21                 $("div").fadeIn("normal");
22                 //以fast speed fadein
23                 $("div").fadeIn("fast");
24             });
25         })
26     </script>
27 </head>
28 <body>
29     <button>淡入</button>
30     <div></div>
31 </body>
32 </html>

1.4. 带callback的淡入动画

格式：

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

示例代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>fadeIn() Demo</title>
 6     <style type="text/css">
 7         div{
 8              300px;
 9             height: 300px;
10             display: none;
11             background-color: #ff6700;
12         }
13     </style>
14     <script type="text/javascript" src="jquery.js"></script>
15     <script>
16         $(function () {
17             $("button").click(function () {
18                 $("div").fadeIn(2000, function () {
19                     alert("fadeIn执行完毕！");
20                 });
21             });
22         })
23     </script>
24 </head>
25 <body>
26     <button>淡入</button>
27     <div></div>
28 </body>
29 </html>

2. fadeOut()

格式：

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

返回值： jQuery

作用：通过淡出的方式隐藏匹配元素

参数(speed)：控制隐藏匹配参数的速度，此参数有三种情况。

　　　　　　（1）省略不写。当speed省略不写时，默认使用400ms的速度淡出。

　　　　　　（2）以number作为参数。此参数为毫秒数， 1000ms = 1s。

　　　　　　（3）以String作为参数。有3种值可选，分别是slow(600ms), normal(400ms), fast(200ms)。

参数(callback)：在执行完淡出操作后，执行的函数。

示例代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>fadeOut() Demo</title>
 6     <style type="text/css">
 7         div{
 8              300px;
 9             height: 300px;
10             display: block;
11             background-color: #ff6700;
12         }
13     </style>
14     <script type="text/javascript" src="jquery.js"></script>
15     <script>
16         $(function () {
17             $("button").click(function () {
18                 $("div").fadeOut();
19             });
20         })
21     </script>
22 </head>
23 <body>
24     <button>淡出</button>
25     <div></div>
26 </body>
27 </html>

fadeOut() 示例代码

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>fadeOut(Number) Demo</title>
 6     <style type="text/css">
 7         div{
 8              300px;
 9             height: 300px;
10             display: block;
11             background-color: #ff6700;
12         }
13     </style>
14     <script type="text/javascript" src="jquery.js"></script>
15     <script>
16         $(function () {
17             $("button").click(function () {
18                 $("div").fadeOut(1000);
19             });
20         })
21     </script>
22 </head>
23 <body>
24     <button>淡出</button>
25     <div></div>
26 </body>
27 </html>

fadeOut(Number)示例代码

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>fadeOut(Number) Demo</title>
 6     <style type="text/css">
 7         div{
 8              300px;
 9             height: 300px;
10             display: block;
11             background-color: #ff6700;
12         }
13     </style>
14     <script type="text/javascript" src="jquery.js"></script>
15     <script>
16         $(function () {
17             $("button").click(function () {
18                 $("div").fadeOut(1000);
19             });
20         })
21     </script>
22 </head>
23 <body>
24     <button>淡出</button>
25     <div></div>
26 </body>
27 </html>

fadeOut(String)示例代码

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>fadeOut(Number) Demo</title>
 6     <style type="text/css">
 7         div{
 8              300px;
 9             height: 300px;
10             display: block;
11             background-color: #ff6700;
12         }
13     </style>
14     <script type="text/javascript" src="jquery.js"></script>
15     <script>
16         $(function () {
17             $("button").click(function () {
18                 $("div").fadeOut(1000, function () {
19                     alert("fadeOut动画执行完毕！")
20                 });
21             });
22         })
23     </script>
24 </head>
25 <body>
26     <button>淡出</button>
27     <div></div>
28 </body>
29 </html>

fadeOut(speed, callback)示例代码

3. fadeToggle()

格式：

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

返回值： jQuery

作用：在淡入动画和淡出动画之间进行切换。当元素隐藏时，以淡入形式显示元素。当元素显示时，以淡出形式隐藏动画。

参数(speed)：控制隐藏匹配参数的速度，此参数有三种情况。

　　　　　　（1）省略不写。当speed省略不写时，默认使用400ms的速度改变透明度。

　　　　　　（2）以number作为参数。此参数为毫秒数， 1000ms = 1s。

　　　　　　（3）以String作为参数。有3种值可选，分别是slow(600ms), normal(400ms), fast(200ms)。

参数(callback)：在执行完淡出操作后，执行的函数。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>fadeToggle() Demo</title>
 6     <style type="text/css">
 7         div{
 8              300px;
 9             height: 300px;
10             display: block;
11             background-color: red;
12         }
13     </style>
14     <script type="text/javascript" src="jquery.js"></script>
15     <script type="text/javascript">
16         $(function () {
17             $("button").click(function () {
18                 $("div").fadeToggle(2000, function () {
19                     alert("动画执行完毕！");
20                 });
21             });
22         })
23     </script>
24 </head>
25 <body>
26     <button>切换</button>
27     <div></div>
28 </body>
29 </html>

fadeToggle() 示例代码

4. fadeTo()

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

返回值： jQuery

作用：将被选元素的不透明度逐渐更改为指定的值

参数(speed)：可选，控制隐藏匹配参数的速度，此参数有三种情况。

　　　　　　（1）省略不写。当speed省略不写时，默认使用400ms的速度淡出。

　　　　　　（2）以number作为参数。此参数为毫秒数， 1000ms = 1s。

　　　　　　（3）以String作为参数。有3种值可选，分别是slow(600ms), normal(400ms), fast(200ms)。

参数(opacity): 必选，规定淡入或者淡出的透明度。必须是介于0.00~1.00之间的数字。

参数(callback)：可选， fadeTo函数执行完之后，要执行的函数。

　　　　　　　如果没有设置speed，那么就不能设置callback。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>fadeTo Demo</title>
 6     <style type="text/css">
 7         div{
 8              300px;
 9             height: 300px;
10             opacity: 1.0;
11             background-color: #ff6700;
12         }
13     </style>
14     <script type="text/javascript" src="jquery.js"></script>
15     <script type="text/javascript">
16         $(function () {
17             $("button").click(function () {
18                 $("div").fadeTo(1000, 0.5, function () {
19                     alert("fadeTo 执行完毕！");
20                     })
21             });
22         })
23     </script>
24 </head>
25 <body>
26     <button>透明度</button>
27     <div></div>
28 </body>
29 </html>

fadeTo() 示例代码

5. 淡入淡出示例代码

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>fadeIn() fadeOut() fadeToggle() Demo</title>
 6     <style type="text/css">
 7         div{
 8              300px;
 9             height: 300px;
10             display: none;
11             opacity: 1;
12             background-color: red;
13         }
14     </style>
15     <script type="text/javascript" src="jquery.js"></script>
16     <script type="text/javascript">
17         $(function () {
18             $("button:eq(0)").click(function () {
19                $("div").fadeIn(2000, function () {
20                    alert("fadeIn 执行完毕！");
21                })
22             });
23 
24             $("button:eq(1)").click(function () {
25                 $("div").fadeOut(2000, function () {
26                     alert("fadeOut执行完毕");
27                 })
28             });
29 
30             $("button:eq(2)").click(function () {
31                 $("div").fadeToggle(2000, function () {
32                     alert("fadeToggle执行完毕")
33                 })
34             });
35 
36             $("button:eq(3)").click(function () {
37                 $("div").fadeTo(1000, 0.5, function () {
38                     alert("透明度执行完毕！")
39                 });
40             });
41         })
42     </script>
43 </head>
44 <body>
45     <button>淡入</button>
46     <button>淡出</button>
47     <button>切换</button>
48     <button>透明度</button>
49     <div></div>
50 </body>
51 </html>

淡入淡出动画示例代码