站長資訊網(wǎng)
jquery動畫函數(shù)有17種：1、animate()，用于對被選元素應(yīng)用自定義的動畫；2、hide()，用于隱藏被選元素；3、show()，用于顯示被選元素；4、fadeOut()，用于通過設(shè)置不透明度來隱藏元素；5、fadeTo()等等。
本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。
jquery動畫函數(shù)
下面的表格列出了所有用于創(chuàng)建動畫效果的 jQuery 方法。
| 方法 | 描述 |
|---|---|
| animate() | 對被選元素應(yīng)用"自定義"的動畫 |
| clearQueue() | 對被選元素移除所有排隊(duì)函數(shù)（仍未運(yùn)行的） |
| delay() | 對被選元素的所有排隊(duì)函數(shù)（仍未運(yùn)行）設(shè)置延遲 |
| dequeue() | 移除下一個(gè)排隊(duì)函數(shù)，然后執(zhí)行函數(shù) |
| fadeIn() | 逐漸改變被選元素的不透明度，從隱藏到可見 |
| fadeOut() | 逐漸改變被選元素的不透明度，從可見到隱藏 |
| fadeTo() | 把被選元素逐漸改變至給定的不透明度 |
| fadeToggle() | 在 fadeIn() 和 fadeOut() 方法之間進(jìn)行切換 |
| finish() | 對被選元素停止、移除并完成所有排隊(duì)動畫 |
| hide() | 隱藏被選元素 |
| queue() | 顯示被選元素的排隊(duì)函數(shù) |
| show() | 顯示被選元素 |
| slideDown() | 通過調(diào)整高度來滑動顯示被選元素 |
| slideToggle() | slideUp() 和 slideDown() 方法之間的切換 |
| slideUp() | 通過調(diào)整高度來滑動隱藏被選元素 |
| stop() | 停止被選元素上當(dāng)前正在運(yùn)行的動畫 |
| toggle() | hide() 和 show() 方法之間的切換 |
下面來介紹一些常用動畫函數(shù)。
1、animate()
animate() 方法執(zhí)行 CSS 屬性集的自定義動畫。
該方法通過 CSS 樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動畫效果。
只有數(shù)字值可創(chuàng)建動畫（比如 "margin:30px"）。字符串值無法創(chuàng)建動畫（比如 "background-color:red"）。
提示：請使用 "+=" 或 "-=" 來創(chuàng)建相對動畫。
示例：通過改變元素的高度，對元素應(yīng)用動畫：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("#btn1").click(function() { $("#box").animate({ height: "300px" }); }); $("#btn2").click(function() { $("#box").animate({ height: "100px" }); }); }); </script> </head> <body> <button id="btn1">使用動畫放大高度</button> <button id="btn2">重置高度</button> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> </body> </html>
2、hide()、show()和toggle()
-
hide() 方法隱藏被選元素。
-
show()顯示被選元素
-
toggle()：hide() 和 show() 方法之間的切換
示例：隱藏或顯示 <p> 元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $(".btn1").click(function() { $("p").hide(); }); $(".btn2").click(function() { $("p").show(); }); }); </script> </head> <body> <p>這是一個(gè)段落。</p> <button class="btn1">隱藏</button> <button class="btn2">顯示</button> </body> </html> </html>
3、slideUp() 、slideDown()和slideToggle()
-
slideUp() 方法：以滑動方式隱藏被選元素。
-
slideDown() 方法：以滑動方式顯示被選元素。
-
slideToggle() 方法：slideUp() 和 slideDown()方法之間的切換
示例：以滑動方式隱藏 <p> 元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $(".btn1").click(function() { $("p").slideUp(); }); $(".btn2").click(function() { $("p").slideDown(); }); }); </script> </head> <body> <p>這是一個(gè)段落。</p> <button class="btn1">上滑</button> <button class="btn2">下滑</button> </body> </html>
4、fadeIn() 、 fadeOut()和fadeToggle()
-
fadeIn() 方法逐漸改變被選元素的不透明度，從隱藏到可見（褪色效果）。
-
fadeOut() 方法逐漸改變被選元素的不透明度，從可見到隱藏（褪色效果）。
-
fadeToggle()：fadeIn() 和 fadeOut()方法之間的切換
示例：使用淡入效果顯示 <p> 元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $(".btn1").click(function() { $("p").fadeOut() }); $(".btn2").click(function() { $("p").fadeIn(); }); }); </script> </head> <body> <p>這是一個(gè)段落。</p> <button class="btn1">淡出</button> <button class="btn2">淡入</button> </body> </html>
5、fadeTo()
fadeTo() 方法逐漸改變被選元素的不透明度為指定的值（褪色效果）。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("p").fadeTo(1000, 0.4); }); }); </script> </head> <body> <button>逐漸改變P元素的不透明度</button> <p>這是一個(gè)段落。</p> </body> </html>
…..
【推薦學(xué)習(xí)：jQuery視頻教程、web前端視頻】
