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