jquery緩動swing liner控制動畫過程不同時刻的速度
更新時間：2014年05月29日 15:50:30 作者：
一個用來控制動畫過程的速度的參數(shù)，這就是緩動(easing)，它確定了動畫過程不同時刻的速度
jQuery效果函數(shù)(slideUp()、fadeIn()等)和animation()函數(shù)都接收另一個用來控制動畫過程的速度的參數(shù)，這就是緩動(easing)，它確定了動畫過程不同時刻的速度。例如，將一個元素移過頁面的時候，可能讓這個元素緩慢地開始移動，然后變得很快，最后隨著動畫的完成再次慢下來。給動畫添加緩動，使得動畫在視覺上更有趣且更有動態(tài)感。
jQuery只包含了兩個緩動方法：swing和linear。linear方法提供了一個穩(wěn)定的動畫，以使得動畫的每個步驟都是相同的(例如，如果要讓一個元素以逐漸變化的方式穿過屏幕，每一步的距離和前一步都是相同的)。swing要更加動態(tài)一些，隨著動畫的開始變得更加快一些，然后再慢下來。swing是一個常用設(shè)置，因此，如果沒有指定任何緩動，jQuery會使用swing方法。
對于任何jQuery效果來說，緩動方法是其第二個參數(shù)，因此，要使用linear方法將一個元素滑出視線，可以這樣編寫代碼：
$('#element'). slideUp(1000，'linear')；
當(dāng)使用animate()函數(shù)的時候，緩動方法是第三個參數(shù)，第一個參數(shù)是一個對象直接量，包含了我們想要實現(xiàn)動畫的CSS屬性；第二個參數(shù)是動畫的整體速度。例如，要對動畫代碼使用linear緩動方法，可以像下面這樣編寫代碼：
$('#message').animate(
{
left：'650px'，
opacity：.5，
fontSize：'24px'
}，
1500，
'linear'
)；
然而，并不僅限于使用jQuery所提供的兩個緩動方法。使用jQuery插件可以添加一系列的其他的緩動方法。
jQuery只包含了兩個緩動方法：swing和linear。linear方法提供了一個穩(wěn)定的動畫，以使得動畫的每個步驟都是相同的(例如，如果要讓一個元素以逐漸變化的方式穿過屏幕，每一步的距離和前一步都是相同的)。swing要更加動態(tài)一些，隨著動畫的開始變得更加快一些，然后再慢下來。swing是一個常用設(shè)置，因此，如果沒有指定任何緩動，jQuery會使用swing方法。
對于任何jQuery效果來說，緩動方法是其第二個參數(shù)，因此，要使用linear方法將一個元素滑出視線，可以這樣編寫代碼：
復(fù)制代碼 代碼如下:
$('#element'). slideUp(1000，'linear')；
當(dāng)使用animate()函數(shù)的時候，緩動方法是第三個參數(shù)，第一個參數(shù)是一個對象直接量，包含了我們想要實現(xiàn)動畫的CSS屬性；第二個參數(shù)是動畫的整體速度。例如，要對動畫代碼使用linear緩動方法，可以像下面這樣編寫代碼：
復(fù)制代碼 代碼如下:
$('#message').animate(
{
left：'650px'，
opacity：.5，
fontSize：'24px'
}，
1500，
'linear'
)；
然而，并不僅限于使用jQuery所提供的兩個緩動方法。使用jQuery插件可以添加一系列的其他的緩動方法。
您可能感興趣的文章:
- 利用原生JS與jQuery實現(xiàn)數(shù)字線性變化的動畫
- jQuery實現(xiàn)的點贊隨機(jī)數(shù)字顯示動畫效果(附在線演示與demo源碼下載)
- 基于JQuery的數(shù)字改變的動畫效果--可用來做計數(shù)器
- jQuery動畫效果animate和scrollTop結(jié)合使用實例
- jQuery實現(xiàn)圖像旋轉(zhuǎn)動畫效果
- 一個CSS+jQuery實現(xiàn)的放大縮小動畫效果
- jquery Ajax 實現(xiàn)加載數(shù)據(jù)前動畫效果的示例代碼
- jQuery動畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法
- jQuery實現(xiàn)數(shù)字自動增加或者減少的動畫效果示例
相關(guān)文章
JQuery中對服務(wù)器控件 DropdownList, RadioButtonList, CheckboxList的操作
JQuery中對服務(wù)器控件 DropdownList, RadioButtonList, CheckboxList的操作總結(jié)，需要的朋友可以參考下。2011-06-06
jquery實現(xiàn)彈出div,始終顯示在屏幕正中間的簡單實例
本篇文章主要是對jquery實現(xiàn)彈出div,始終顯示在屏幕正中間的簡單實例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
一款優(yōu)秀的jQuery插件,要做到通用、靈活度高、可配置、兼容性好、易用性高、耦合度低...想要做到這些,嘿嘿,那么就來看今天所介紹的jQuery插件制作的實例教程.2016-05-05
jQuery attr()方法用于設(shè)置/改變屬性值，下面的例子演示如何改變（設(shè)置）鏈接中 href 屬性的值2014-01-01
輕輕松松搞定jQuery.noConflict()，jQuery.noConflict()背后實現(xiàn)原理值得Web開發(fā)者學(xué)習(xí)了解掌握，感興趣的小伙伴們可以參考一下2016-02-02
可以利用js函數(shù)來實現(xiàn)對表格的維護(hù)和刪除，相對于JavaScript簡單方便，下面通過實例代碼給大家介紹下jQuery表格的維護(hù)和刪除操作，一起通過本文學(xué)習(xí)吧2017-02-02
查詢功能是開發(fā)中最重要的一個功能，大量數(shù)據(jù)的顯示，我們用的最多的就是分頁。2011-02-02
下面小編就為大家?guī)硪黄猨query實時獲取時間的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
用jquery解析JSON數(shù)據(jù)的方法,作為jquery異步請求的傳輸對象，jquery請求后返回的結(jié)果是json對象,這里考慮的都是服務(wù)器返回JSON形式的字符串的形式，對于利用JSONObject等插件封裝的JSON對象，與此亦是大同小異，這里不再做說明2015-03-03
jQuery模仿京東/天貓商品左側(cè)分類導(dǎo)航菜單效果
在京東或者是天貓上可以看到左側(cè)分類導(dǎo)航菜單，當(dāng)鼠標(biāo)滑過導(dǎo)航分類時，會出現(xiàn)詳細(xì)分類模塊，鼠標(biāo)移開就會恢復(fù)默認(rèn)樣式，下面小編給大家?guī)砹嘶?mouseenter()和mouseleave()實現(xiàn)仿京東/天貓商品左側(cè)分類導(dǎo)航菜單效果，一起看看吧2016-06-06