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