基于JQuery 滑動與動畫的說明介紹
jQuery 滑動方法:您可以在元素上創(chuàng)建滑動效果。
slideDown() 向下滑動元素。
slideUp() 向上滑動元素。
slideToggle() 在 slideDown() 與 slideUp() 方法之間進(jìn)行切換。
$(selector).slide(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值:"slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。
jQuery 動畫 - jQuery animate() 方法用于創(chuàng)建自定義動畫。
語法:
$(selector).animate({params},speed,callback);
必需的 params 參數(shù)定義形成動畫的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值:"slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱。
默認(rèn)情況下,所有 HTML 元素的位置都是靜態(tài)的,并且無法移動。如需對位置進(jìn)行操作,記得首先把元素的CSS 的 position 屬性設(shè)置為 relative、fixed 或 absolute。
jQuery animate() - 能夠操作多個(gè)屬性
如果需要生成顏色動畫,您需要從 jQuery.com 下載 Color Animations 插件。
jQuery animate() - 使用相對值
也可以定義相對值(該值相對于元素的當(dāng)前值)。需要在值的前面加上 += 或 -=:
jQuery animate() - 使用預(yù)定義的值
您甚至可以把屬性的動畫值設(shè)置為 "show"、"hide" 或 "toggle":
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() - 使用隊(duì)列功能
默認(rèn)地,jQuery 提供針對動畫的隊(duì)列功能。
這意味著如果在彼此之后編寫多個(gè) animate() 調(diào)用,jQuery 會創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊(duì)列。然后逐一運(yùn)行這些 animate 調(diào)用。
ex1,ex2
jQuery stop() 方法
jQuery stop() 方法用于停止動畫或效果,在它們完成之前。
stop() 方法適用于所有 jQuery 效果函數(shù),包括滑動、淡入淡出和自定義動畫。
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動畫隊(duì)列。默認(rèn)是 false,即僅停止活動的動畫,允許任何排入隊(duì)列的動畫向后執(zhí)行。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動畫。默認(rèn)是 false。
因此,默認(rèn)地,stop() 會清除在被選元素上指定的當(dāng)前動畫。
相關(guān)文章
jQuery處理xml格式的返回?cái)?shù)據(jù)(實(shí)例解析)
在以下示例中,我將使用$.ajax()方法,使用$.get()方法也可以,但我覺得$.ajax()更好一些,代碼更容易懂,并且也不怎么復(fù)雜2013-11-11jquery實(shí)現(xiàn)點(diǎn)擊a鏈接,跳轉(zhuǎn)之后,該a鏈接處顯示背景色的方法
下面小編就為大家分享一篇jquery實(shí)現(xiàn)點(diǎn)擊a鏈接,跳轉(zhuǎn)之后,該a鏈接處顯示背景色的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01jquery+easeing實(shí)現(xiàn)仿flash的載入動畫
本文主要給大家講述的是如何使用jquery+easeing實(shí)現(xiàn)仿flash的載入動畫的方法,附上示例代碼,非常細(xì)致全面,這里推薦給大家,希望對大家熟練使用jQuery有所幫助。2015-03-03jquery中實(shí)現(xiàn)簡單的tabs插件功能的代碼
jquery改變了程序員寫javascript的方式。作為jquery的愛好者和新手,最近我學(xué)會了用寥寥幾句jquery代碼實(shí)現(xiàn)類似tabs插件的功能,相信此文能為許多剛?cè)腴T的jquery愛好者和想實(shí)現(xiàn)tabs插件功能的朋友帶來一些幫助。2011-03-03