jQuery Easing.js 插件的簡單使用

jQuery Easing.js 插件的簡單使用

==介紹：==easing是jquery的一個插件，使用它能夠建立更加絢麗的動畫效果。

==環境：==由於easing是jQuery的插件，因此必須是在引入jquery以後再引入它

簡單的寫法

$(".car").animate({"left": "150%"},  4000, "easeInElastic", function() {});
複製代碼

easing:格式爲json,{ duration: 持續時間, easing: 過渡效果, complete: 成功後的回調函數}

示例：

$(element).animate({ 
    height:500, 
    width:600 
    },{ 
    easing: 'easeInOutQuad', 
    duration: 500, 
    complete: function(){} 
}); 
複製代碼

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 Examples的網址