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{
            width: 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             width: 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             width: 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             width: 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             width: 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() 示例代码