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是一個常用設置，因此，如果沒有指定任何緩動，jQuery會使用swing方法。
對于任何jQuery效果來說，緩動方法是其第二個參數(shù)，因此，要使用linear方法將一個元素滑出視線，可以這樣編寫代碼：
$('#element'). slideUp(1000，'linear')；
當使用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是一個常用設置，因此，如果沒有指定任何緩動，jQuery會使用swing方法。
對于任何jQuery效果來說，緩動方法是其第二個參數(shù)，因此，要使用linear方法將一個元素滑出視線，可以這樣編寫代碼：
復制代碼 代碼如下:
$('#element'). slideUp(1000，'linear')；
當使用animate()函數(shù)的時候，緩動方法是第三個參數(shù)，第一個參數(shù)是一個對象直接量，包含了我們想要實現(xiàn)動畫的CSS屬性；第二個參數(shù)是動畫的整體速度。例如，要對動畫代碼使用linear緩動方法，可以像下面這樣編寫代碼：
復制代碼 代碼如下:
$('#message').animate(
{
left：'650px'，
opacity：.5，
fontSize：'24px'
}，
1500，
'linear'
)；
然而，并不僅限于使用jQuery所提供的兩個緩動方法。使用jQuery插件可以添加一系列的其他的緩動方法。
您可能感興趣的文章:
- 利用原生JS與jQuery實現(xiàn)數(shù)字線性變化的動畫
- jQuery實現(xiàn)的點贊隨機數(shù)字顯示動畫效果(附在線演示與demo源碼下載)
- 基于JQuery的數(shù)字改變的動畫效果--可用來做計數(shù)器
- jQuery動畫效果animate和scrollTop結合使用實例
- jQuery實現(xiàn)圖像旋轉動畫效果
- 一個CSS+jQuery實現(xiàn)的放大縮小動畫效果
- jquery Ajax 實現(xiàn)加載數(shù)據(jù)前動畫效果的示例代碼
- jQuery動畫出現(xiàn)連續(xù)觸發(fā)、滯后反復執(zhí)行的解決方法
- jQuery實現(xiàn)數(shù)字自動增加或者減少的動畫效果示例
相關文章
jquery實現(xiàn)html頁面先加載內容過幾秒后顯示數(shù)據(jù)
這篇文章主要給大家介紹了關于jquery實現(xiàn)html頁面先加載內容過幾秒后顯示數(shù)據(jù)的相關資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
本文主要分享了編寫設置和獲取顏色的插件，該插件用來實現(xiàn)兩個功能：1.設置元素的顏色;2.獲取元素的顏色。 具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了jQuery自定義導入組件的相關資料,包括組件js，組件css及組件引用的內容，非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-11-11
這個是上次在博客園看到的一篇文章，經(jīng)測試，確實比jquery的$(document).ready(function(){....})更快，并且在ie和火狐等主流瀏覽器上都沒問題2010-04-04
本文給大家分享一款jquery實現(xiàn)的完美拖拽(拖動div層效果)，如果你正在找這類效果不妨進入?yún)⒖家幌隆?/div> 2015-06-06
用jquery對表單進行客戶端驗證demo ，學習jquery的朋友可以參考下。2009-08-08
這篇文章主要為大家詳細介紹了jquery+CSS3實現(xiàn)3D拖拽相冊效果的具體代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
jQuery獲取文本節(jié)點之 text()/val()/html() 方法區(qū)別
在jquery中val,text,html都能取到值,或加一個參數(shù)來賦值,那么它們有些什么區(qū)別?2011-03-03
這篇文章主要介紹了Jquery取得iframe下內容的方法，有需要的朋友可以參考一下2013-11-11
jquery 設置元素相對于另一個元素的top值(實例代碼)
在jquery中offset().top是相對于body來說的，另外在設置top值的時候要找到與該元素最近的有相對值的元素2013-11-11最新評論