1. 程式人生 > >jQuery Easing 使用方法及其圖解

jQuery 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
當然一般一個專案中不可能會用到這麼多效果,為了減少程式碼冗餘,必要時可以不用引入整個jquery.easing.1.3.js,我們可以只把我們需要的幾種easing放入Javascript檔案中,如專案中只用到"easeOutExpo"和"easeOutBounce"兩種效果,只需要下面的程式碼就可以了。

使用jQuery自定義動畫函式animate來指定easing效果,如自定義一種類彈簧效果的動畫:

  1. $(myElement).animate({  
  2.     top: 500,  
  3.     opacity: 1  
  4. }, 1000, 'easeOutBounce');  

值得一提的是jQuery 1.4版本中對animate()方法,easing的方法進行了擴充套件,支援為每個屬性指定easing方法,詳細請參考這裡,如:

  1. $(myElement).animate({  
  2.     left: [500, 'swing'],  
  3.     top: [200, 'easeOutBounce']  
  4. });  

也可以用另外一種寫法:

  1. $(myElement).animate({  
  2.     left: 500,  
  3.     top: 200  
  4. }, {  
  5.     specialEasing: {  
  6.         left: 'swing',  
  7.         top: 'easeOutBounce'
  8.     }  
  9. });  

使用jQuery內建動畫函式如slideUp()、slideDown()等來指定easing效果,以下兩種方法都可以:

  1. $(myElement).slideUp(1000, method, callback});  
  2. $(myElement).slideUp({  
  3.     duration: 1000,   
  4.     easing: method,   
  5.     complete: callback  
  6. });  

jQuery easing 圖解

以下圖解可以讓你更容易理解每一種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
本文轉自   http://blog.sina.com.cn/liws0905       多謝原文作者    前端-老李