≡

jQuery Easing 使用方法及其圖解

Time:2014/10/07 09:42:45   Click:

從jQuery API 文檔中可以知道(dào)，jQuery自界說(shuō)動畫的函數.animate( properties [, duration] [, easing] [, complete] )有四個參數：

  • properties：一組包括作爲動畫屬性以及終值的樣(yàng)式屬性以及及其值的糾合
  • duration(可選)：動畫執行時(shí)間，其值可所以三種(zhǒng)預定速率之一的字符串("slow", "normal", or "fast")或者暗示動畫時(shí)長(cháng)的毫秒數值(如：1000)
  • easing(可選)：要使用的過(guò)渡效果的名稱，如："linear" 或者"swing"
  • complete(可選)：在動畫完成(chéng)時(shí)執行的函數
此中參數easing默許有兩(liǎng)個效果："linear"以及"swing"，若是必要更多效果就(jiù)要插件支撐了，jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等30多種(zhǒng)效果，年夜家可以點擊這(zhè)裡(lǐ)去看每一一種(zhǒng)easing的演示效果，下面(miàn)具體先容下其使用方式及每一種(zhǒng)easing的曲線圖。

jQuery easing 使用方式

起(qǐ)首，項目中若是必要使用特殊的動畫效果，則必要在引入jQuery以後(hòu)引入jquery.easing.1.3.js
[html]view plaincopyprint?
  1. <scripttype="text/javascript"src="static/js/jquery-1.8.3.js"></script>
  2. <scripttype="text/javascript"src="static/js/jquery.easing.1.3.js"></script>

引入以後(hòu)，easing參數可選的值就(jiù)有如下32種(zhǒng)：

  1. linear
  2. swing
  3. easeInQuad
  4. easeOutQuad
  5. easeInOutQuad
  6. easeInCubic
  7. easeOutCubic
  8. easeInOutCubic
  9. easeInQuart
  10. easeOutQuart
  11. easeInOutQuart
  12. easeInQuint
  13. easeOutQuint
  14. easeInOutQuint
  15. easeInExpo
  16. easeOutExpo
  17. easeInOutExpo
  18. easeInSine
  19. easeOutSine
  20. easeInOutSine
  21. easeInCirc
  22. easeOutCirc
  23. easeInOutCirc
  24. easeInElastic
  25. easeOutElastic
  26. easeInOutElastic
  27. easeInBack
  28. easeOutBack
  29. easeInOutBack
  30. easeInBounce
  31. easeOutBounce
  32. easeInOutBounce
固然一般一個項目中不成(chéng)能(néng)會(huì)用到這(zhè)麼(me)多效果，爲了削減代碼冗餘，需要時(shí)可以不消引入整個jquery.easing.1.3.js，咱們可以隻把咱們必要的幾種(zhǒng)easing放入Javascript文件中，如項目中隻用到"easeOutExpo"以及"easeOutBounce"兩(liǎng)種(zhǒng)效果，隻必要下面(miàn)的代碼就(jiù)能(néng)夠了
[javascript]view plaincopyprint?
  1. jQuery.extend( jQuery.easing,  
  2. {  
  3.     easeOutExpo: function (x, t, b, c, d) {  
  4. return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;  
  5.     },  
  6.     easeOutBounce: function (x, t, b, c, d) {  
  7. if ((t/=d) < (1/2.75)) {  
  8. return c*(7.5625*t*t) + b;  
  9.         } elseif (t < (2/2.75)) {  
  10. return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;  
  11.         } elseif (t < (2.5/2.75)) {  
  12. return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;  
  13.         } else {  
  14. return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;  
  15.         }  
  16.     },  
  17. });  

使用jQuery自界說(shuō)動畫函數animate來指定easing效果，如自界說(shuō)一種(zhǒng)類彈簧效果的動畫：

[javascript]view plaincopyprint?
  1. $(myElement).animate({  
  2.     top: 500,  
  3.     opacity: 1  
  4. }, 1000, 'easeOutBounce');  

值患上一提的是jQuery 1.4版本中對(duì)animate()方式，easing的方式進(jìn)行了擴大，支撐爲每一個屬性指定easing方式，具體請參考這(zhè)裡(lǐ)，如：

[javascript]view plaincopyprint?
  1. $(myElement).animate({  
  2.     left: [500, 'swing'],  
  3.     top: [200, 'easeOutBounce']  
  4. });  
也能(néng)夠用另一種(zhǒng)寫法：
[javascript]view plaincopyprint?
  1. $(myElement).animate({  
  2.     left: 500,  
  3.     top: 200  
  4. }, {  
  5.     specialEasing: {  
  6.         left: 'swing',  
  7.         top: 'easeOutBounce'
  8.     }  
  9. });  

使用jQuery内置動畫函數如slideUp()、slideDown()等來指定easing效果，如下兩(liǎng)種(zhǒng)方式均可以：
[javascript]view plaincopyprint?
  1. $(myElement).slideUp(1000, method, callback});  
  2. $(myElement).slideUp({  
  3.     duration: 1000,   
  4.     easing: method,   
  5.     complete: callback  
  6. });  


jQuery easing 圖解

如下圖解可讓你更易理解每一一種(zhǒng)easing的效果

1. linear 2. swing 3. easeInQuad 4. easeOutQuad 5. easeInOutQuad 6. easeInCubic
7. easeOutCubic 8. easeInOutCubic 9. easeInQuart 10. easeOutQuart 11. easeInOutQuart 12. easeInQuint
13. easeOutQuint 14. easeInOutQuint 15. easeInExpo 16. easeOutExpo 17. easeInOutExpo 18. easeInSine
19. easeOutSine 20. easeInOutSine 21. easeInCirc 22. easeOutCirc 23. easeInOutCirc 24. easeInElastic
25. easeOutElastic 26. easeInOutElastic 27. easeInBack 28. easeOutBack 29. easeInOutBack 30. easeInBounce




31. easeOutBounce 32. easeInOutBounce  

     尚狐網絡-緻力于爲四川成(chéng)都(dōu)提供最專業的網站建設服務。

TAG

上一篇：開(kāi)女裝淘寶網店應該如何解決庫存壓貨的問題

下一篇：2013年SEO應該如何做，網站外鏈還(hái)有用嗎

尚狐網絡微信
熱門文章
最新文章
TOP

錦江區聚格樂享網絡工作室@2012 版權所有
蜀ICP備12016524号-2

立即咨詢
成(chéng)都(dōu)網站建設,成(chéng)都(dōu)做網站,錦江區聚格樂享網絡工作室 
40f13d50b73e104f832ed1b719ae6935