DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於JQuery 滑動與動畫的說明介紹
基於JQuery 滑動與動畫的說明介紹
編輯:JQuery特效代碼     

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() 方法

jQuery stop() 方法用於停止動畫或效果,在它們完成之前。

stop() 方法適用於所有 jQuery 效果函數,包括滑動、淡入淡出和自定義動畫。

$(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false,即僅停止活動的動畫,允許任何排入隊列的動畫向後執行。

可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。

因此,默認地,stop() 會清除在被選元素上指定的當前動畫。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved