jQuery Easing 使用方法及其圖解
阿新 • • 發佈:2019-02-03
-
linear
-
swing
-
easeInQuad
-
easeOutQuad
-
easeInOutQuad
-
easeInCubic
-
easeOutCubic
-
easeInOutCubic
-
easeInQuart
-
easeOutQuart
-
easeInOutQuart
-
easeInQuint
-
easeOutQuint
-
easeInOutQuint
-
easeInExpo
-
easeOutExpo
-
easeInOutExpo
-
easeInSine
-
easeOutSine
-
easeInOutSine
-
easeInCirc
-
easeOutCirc
-
easeInOutCirc
-
easeInElastic
-
easeOutElastic
-
easeInOutElastic
-
easeInBack
-
easeOutBack
-
easeInOutBack
-
easeInBounce
-
easeOutBounce
- easeInOutBounce
使用jQuery自定義動畫函式animate來指定easing效果,如自定義一種類彈簧效果的動畫:
- $(myElement).animate({
- top: 500,
- opacity: 1
- }, 1000, 'easeOutBounce');
值得一提的是jQuery 1.4版本中對animate()方法,easing的方法進行了擴充套件,支援為每個屬性指定easing方法,詳細請參考這裡,如:
- $(myElement).animate({
- left: [500, 'swing'],
- top: [200, 'easeOutBounce']
- });
也可以用另外一種寫法:
- $(myElement).animate({
-
left: 500,
- top: 200
- }, {
- specialEasing: {
- left: 'swing',
- top: 'easeOutBounce'
- }
- });
使用jQuery內建動畫函式如slideUp()、slideDown()等來指定easing效果,以下兩種方法都可以:
- $(myElement).slideUp(1000, method, callback});
- $(myElement).slideUp({
- duration: 1000,
- easing: method,
- complete: callback
- });
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 |