jQuery 滑動方法:您可以在元素上創建滑動效果。
slideDown() 向下滑動元素。
slideUp() 向上滑動元素。
slideToggle() 在 slideDown() 與 slideUp() 方法之間進行切換。
$(selector).slide(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。
可選的 callback 參數是滑動完成後所執行的函數名稱。
jQuery 動畫 - jQuery animate() 方法用於創建自定義動畫。
語法:
$(selector).animate({params},speed,callback);
必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。
可選的 callback 參數是動畫完成後所執行的函數名稱。
默認情況下,所有 HTML 元素的位置都是靜態的,並且無法移動。如需對位置進行操作,記得首先把元素的CSS 的 position 屬性設置為 relative、fixed 或 absolute。
jQuery animate() - 能夠操作多個屬性
如果需要生成顏色動畫,您需要從 jQuery.com 下載 Color Animations 插件。
jQuery animate() - 使用相對值
也可以定義相對值(該值相對於元素的當前值)。需要在值的前面加上 += 或 -=:
jQuery animate() - 使用預定義的值
您甚至可以把屬性的動畫值設置為 "show"、"hide" 或 "toggle":
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() - 使用隊列功能
默認地,jQuery 提供針對動畫的隊列功能。
這意味著如果在彼此之後編寫多個 animate() 調用,jQuery 會創建包含這些方法調用的“內部”隊列。然後逐一運行這些 animate 調用。
ex1,ex2
jQuery stop() 方法用於停止動畫或效果,在它們完成之前。
stop() 方法適用於所有 jQuery 效果函數,包括滑動、淡入淡出和自定義動畫。
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false,即僅停止活動的動畫,允許任何排入隊列的動畫向後執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
因此,默認地,stop() 會清除在被選元素上指定的當前動畫。