zoukankan html css js c++ java

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>

淡入淡出动画示例代码

查看全文

相关阅读:
SAP S/4HANA extensibility扩展原理介绍
 SAP CRM系统订单模型的设计与实现
 使用nodejs代码在SAP C4C里创建Individual customer
SAP Cloud for Customer Account和individual customer的区别
 Let the Balloon Rise map一个数组
 How Many Tables 简单并查集
 Heap Operations 优先队列
 Arpa’s obvious problem and Mehrdad’s terrible solution 思维
 Passing the Message 单调栈两次
 The Suspects 并查集

原文地址：https://www.cnblogs.com/yang-wei/p/9514526.html