您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“jquery動(dòng)畫(huà)函數(shù)有哪些”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“jquery動(dòng)畫(huà)函數(shù)有哪些”吧!
jquery動(dòng)畫(huà)函數(shù)有17種:1、animate(),用于對(duì)被選元素應(yīng)用自定義的動(dòng)畫(huà);2、hide(),用于隱藏被選元素;3、show(),用于顯示被選元素;4、fadeOut(),用于通過(guò)設(shè)置不透明度來(lái)隱藏元素;5、fadeTo()等等。
本教程操作環(huán)境:windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。
jquery動(dòng)畫(huà)函數(shù)
下面的表格列出了所有用于創(chuàng)建動(dòng)畫(huà)效果的 jQuery 方法。
方法 | 描述 |
---|---|
animate() | 對(duì)被選元素應(yīng)用"自定義"的動(dòng)畫(huà) |
clearQueue() | 對(duì)被選元素移除所有排隊(duì)函數(shù)(仍未運(yùn)行的) |
delay() | 對(duì)被選元素的所有排隊(duì)函數(shù)(仍未運(yùn)行)設(shè)置延遲 |
dequeue() | 移除下一個(gè)排隊(duì)函數(shù),然后執(zhí)行函數(shù) |
fadeIn() | 逐漸改變被選元素的不透明度,從隱藏到可見(jiàn) |
fadeOut() | 逐漸改變被選元素的不透明度,從可見(jiàn)到隱藏 |
fadeTo() | 把被選元素逐漸改變至給定的不透明度 |
fadeToggle() | 在 fadeIn() 和 fadeOut() 方法之間進(jìn)行切換 |
finish() | 對(duì)被選元素停止、移除并完成所有排隊(duì)動(dòng)畫(huà) |
hide() | 隱藏被選元素 |
queue() | 顯示被選元素的排隊(duì)函數(shù) |
show() | 顯示被選元素 |
slideDown() | 通過(guò)調(diào)整高度來(lái)滑動(dòng)顯示被選元素 |
slideToggle() | slideUp() 和 slideDown() 方法之間的切換 |
slideUp() | 通過(guò)調(diào)整高度來(lái)滑動(dòng)隱藏被選元素 |
stop() | 停止被選元素上當(dāng)前正在運(yùn)行的動(dòng)畫(huà) |
toggle() | hide() 和 show() 方法之間的切換 |
下面來(lái)介紹一些常用動(dòng)畫(huà)函數(shù)。
1、animate()
animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫(huà)。
該方法通過(guò) CSS 樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。CSS屬性值是逐漸改變的,這樣就可以創(chuàng)建動(dòng)畫(huà)效果。
只有數(shù)字值可創(chuàng)建動(dòng)畫(huà)(比如 "margin:30px")。字符串值無(wú)法創(chuàng)建動(dòng)畫(huà)(比如 "background-color:red")。
提示:請(qǐng)使用 "+=" 或 "-=" 來(lái)創(chuàng)建相對(duì)動(dòng)畫(huà)。
示例:通過(guò)改變?cè)氐母叨?,?duì)元素應(yīng)用動(dòng)畫(huà):
<!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">使用動(dòng)畫(huà)放大高度</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() 方法:以滑動(dòng)方式隱藏被選元素。
slideDown() 方法:以滑動(dòng)方式顯示被選元素。
slideToggle() 方法:slideUp() 和 slideDown()方法之間的切換
示例:以滑動(dòng)方式隱藏 <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() 方法逐漸改變被選元素的不透明度,從隱藏到可見(jiàn)(褪色效果)。
fadeOut() 方法逐漸改變被選元素的不透明度,從可見(jiàn)到隱藏(褪色效果)。
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>
到此,相信大家對(duì)“jquery動(dòng)畫(huà)函數(shù)有哪些”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún),關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。