JQuery动画之淡入淡出动画_随笔

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

代码示例：

 <!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(2000);

             });

         })

     </script>

 </head>

 <body>

     <button>淡入</button>

     <div></div>

 </body>

 </html>

1.3 带String参数的淡入动画

格式：

$(selector).fadeIn(String);

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

示例代码：

 <!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 () {

                 //以slow speed fadein

                 $("div").fadeIn("slow");

                 //以normal speed fadein

                 $("div").fadeIn("normal");

                 //以fast speed fadein

                 $("div").fadeIn("fast");

             });

         })

     </script>

 </head>

 <body>

     <button>淡入</button>

     <div></div>

 </body>

 </html>

1.4. 带callback的淡入动画

格式：

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

示例代码：

 <!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(2000, function () {

                     alert("fadeIn执行完毕！");

                 });

             });

         })

     </script>

 </head>

 <body>

     <button>淡入</button>

     <div></div>

 </body>

 </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)：在执行完淡出 *** 作后，执行的函数。

示例代码：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>fadeOut() Demo</title>

     <style type="text/css">

         div{

             width: 300px;

             height: 300px;

             display: block;

             background-color: #ff6700;

         }

     </style>

     <script type="text/javascript" src="jquery.js"></script>

     <script>

         $(function () {

             $("button").click(function () {

                 $("div").fadeOut();

             });

         })

     </script>

 </head>

 <body>

     <button>淡出</button>

     <div></div>

 </body>

 </html>

fadeOut() 示例代码

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>fadeOut(Number) Demo</title>

     <style type="text/css">

         div{

             width: 300px;

             height: 300px;

             display: block;

             background-color: #ff6700;

         }

     </style>

     <script type="text/javascript" src="jquery.js"></script>

     <script>

         $(function () {

             $("button").click(function () {

                 $("div").fadeOut(1000);

             });

         })

     </script>

 </head>

 <body>

     <button>淡出</button>

     <div></div>

 </body>

 </html>

fadeOut(Number)示例代码

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>fadeOut(Number) Demo</title>

     <style type="text/css">

         div{

             width: 300px;

             height: 300px;

             display: block;

             background-color: #ff6700;

         }

     </style>

     <script type="text/javascript" src="jquery.js"></script>

     <script>

         $(function () {

             $("button").click(function () {

                 $("div").fadeOut(1000);

             });

         })

     </script>

 </head>

 <body>

     <button>淡出</button>

     <div></div>

 </body>

 </html>

fadeOut(String)示例代码

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>fadeOut(Number) Demo</title>

     <style type="text/css">

         div{

             width: 300px;

             height: 300px;

             display: block;

             background-color: #ff6700;

         }

     </style>

     <script type="text/javascript" src="jquery.js"></script>

     <script>

         $(function () {

             $("button").click(function () {

                 $("div").fadeOut(1000, function () {

                     alert("fadeOut动画执行完毕！")

                 });

             });

         })

     </script>

 </head>

 <body>

     <button>淡出</button>

     <div></div>

 </body>

 </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)：在执行完淡出 *** 作后，执行的函数。

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>fadeToggle() Demo</title>

     <style type="text/css">

         div{

             width: 300px;

             height: 300px;

             display: block;

             background-color: red;

         }

     </style>

     <script type="text/javascript" src="jquery.js"></script>

     <script type="text/javascript">

         $(function () {

             $("button").click(function () {

                 $("div").fadeToggle(2000, function () {

                     alert("动画执行完毕！");

                 });

             });

         })

     </script>

 </head>

 <body>

     <button>切换</button>

     <div></div>

 </body>

 </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。

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>fadeTo Demo</title>

     <style type="text/css">

         div{

             width: 300px;

             height: 300px;

             opacity: 1.0;

             background-color: #ff6700;

         }

     </style>

     <script type="text/javascript" src="jquery.js"></script>

     <script type="text/javascript">

         $(function () {

             $("button").click(function () {

                 $("div").fadeTo(1000, 0.5, function () {

                     alert("fadeTo 执行完毕！");

                     })

             });

         })

     </script>

 </head>

 <body>

     <button>透明度</button>

     <div></div>

 </body>

 </html>

fadeTo() 示例代码

5. 淡入淡出示例代码

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>fadeIn() fadeOut() fadeToggle() Demo</title>

     <style type="text/css">

         div{

             width: 300px;

             height: 300px;

             display: none;

             opacity: 1;

             background-color: red;

         }

     </style>

     <script type="text/javascript" src="jquery.js"></script>

     <script type="text/javascript">

         $(function () {

             $("button:eq(0)").click(function () {

                $("div").fadeIn(2000, function () {

                    alert("fadeIn 执行完毕！");

                })

             });

             $("button:eq(1)").click(function () {

                 $("div").fadeOut(2000, function () {

                     alert("fadeOut执行完毕");

                 })

             });

             $("button:eq(2)").click(function () {

                 $("div").fadeToggle(2000, function () {

                     alert("fadeToggle执行完毕")

                 })

             });

             $("button:eq(3)").click(function () {

                 $("div").fadeTo(1000, 0.5, function () {

                     alert("透明度执行完毕！")

                 });

             });

         })

     </script>

 </head>

 <body>

     <button>淡入</button>

     <button>淡出</button>

     <button>切换</button>

     <button>透明度</button>

     <div></div>

 </body>

 </html>

淡入淡出动画示例代码

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/587111.html

JQuery动画之淡入淡出动画

发表评论

评论列表（0条）