jQuery API提供了簡(jiǎn)單的動(dòng)畫效果如淡入淡出以及自定義動(dòng)畫效果,而今天我給大家分享的是一款jQuery動(dòng)畫效果擴(kuò)展增強(qiáng)插件jquery.easing.js,使用該插件可以實(shí)現(xiàn)直線勻速運(yùn)功、變加速運(yùn)動(dòng)、緩沖等豐富的動(dòng)畫效果。
jQuery easing 線性動(dò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 | | | | |