jquery.easing

easing 是jquery.animate（properties，［duration］，［easing］，［complete］）中的一个属性，用来设定过渡效果的名称。

如果在项目要使用特殊的动画效果，则需要在引入jquery.js 后引入

jquery.easing.js 。

引入之后，easing参数可选的值就有以下32种：

 

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

而在项目中一般用不到如此多的效果，所以为了减少代码冗余，我们可以只把需要的几种easing放在js文件中，如下：

$.extend( jQuery.easing ,{

flyFastSlow: function (x, t, b, c, d) {

return -c * ((t=t/d-1)*t*t*t  - 1) + b;

}

});

在jquery 1.4中，对animate（）方法进行了扩展，支持为每个属性置顶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. });  

转载于:https://my.oschina.net/u/2618661/blog/632315