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
代碼示例：?
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() 示例代碼 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> 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 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> 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 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> 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 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> 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 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> 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 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> 淡入淡出動畫 示例代碼?
轉載于:https://www.cnblogs.com/yang-wei/p/9514526.html
總結
以上是生活随笔為你收集整理的JQuery动画之淡入淡出动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Less代码规范
- 下一篇： Flutter-Cookbook 非官方