DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery緩動swing liner控制動畫過程不同時刻的速度
jquery緩動swing liner控制動畫過程不同時刻的速度
編輯:JQuery特效代碼     
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:'24px'
},
1500,
'linear'
);

然而,並不僅限於使用jQuery所提供的兩個緩動方法。使用jQuery插件可以添加一系列的其他的緩動方法。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved