首頁 > web前端 > js教程 > jquery緩動swing liner控制動畫過程不同時刻的速度_jquery

jquery緩動swing liner控制動畫過程不同時刻的速度_jquery

WBOY
發布: 2016-05-16 16:46:25
原創
1305 人瀏覽過

jQuery效果函數(slideUp()、fadeIn()等)和animation()函數都接收另一個用來控制動畫過程的速度的參數,這就是緩動(easing),它確定了動畫過程不同時刻的速度。例如,將一個元素移過頁面的時候,可能會讓這個元素緩慢地開始移動,然後變得很快,最後隨著動畫的完成再次慢下來。為動畫添加緩動,讓動畫在視覺上更有趣且更有動態感。

jQuery只包含了兩個緩動方法:swing和linear。 linear方法提供了一個穩定的動畫,以使得動畫的每個步驟都是相同的(例如,如果要讓一個元素以逐漸變化的方式穿過屏幕,每一步的距離和前一步都是相同的)。 swing要更加動態一些,隨著動畫的開始變得更加快一些,然後再慢下來。 swing是一個常用設置,因此,如果沒有指定任何緩動,jQuery會使用swing方法。

對於任何jQuery效果來說,緩動方法是其第二個參數,因此,要使用linear方法將一個元素滑出視線,可以這樣編寫程式碼:

複製程式碼 程式碼如下:

$('#element'). slideUp(1000,'linear');

當使用animate()函數的時候,緩動方法是第三個參數,第一個參數是一個物件直接量,包含了我們想要實現動畫的CSS屬性;第二個參數是動畫的整體速度。例如,要對動畫程式碼使用linear緩動方法,可以像下面這樣寫程式碼:
複製程式碼 程式碼如下:

$('#message').animate(
{
left:'650px',
opacity:.5,
fontSize:'24x'
},
1500,
'linear'
);

然而,並不僅限於使用jQuery所提供的兩個緩動方法。使用jQuery插件可以添加一系列的其他的緩動方法。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板