JQuery动画之淡入淡出动画
Posted yang-wei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
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 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(1000); 19 }); 20 }) 21 </script> 22 </head> 23 <body> 24 <button>淡出</button> 25 <div></div> 26 </body> 27 </html>
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 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(1000); 19 }); 20 }) 21 </script> 22 </head> 23 <body> 24 <button>淡出</button> 25 <div></div> 26 </body> 27 </html>
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 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(1000, function () { 19 alert("fadeOut动画执行完毕！") 20 }); 21 }); 22 }) 23 </script> 24 </head> 25 <body> 26 <button>淡出</button> 27 <div></div> 28 </body> 29 </html>
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 width: 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>
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 width: 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>
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 width: 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>
以上是关于JQuery动画之淡入淡出动画的主要内容，如果未能解决你的问题，请参考以下文章