jQuery Easing实现完美动画效果的扩展插件

jQuery Easing是一款jQuery动画效果扩展增强插件，使用该插件可以实现直线匀速运功、变加速运动、缓冲、淡入淡出等丰富的动画效果。它非常小巧，且有多种动画方案供选择，使用简单，不仅可以用于图像特效，像一些基础的层操作也可以使用。

引入jQuery Easing

该插件基于jQuery，所以需要同时引入jQuery库文件和Easing js文件。

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.min.js"></script>

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

使用jQuery Easing

jQuery Easing是在jQuery原有的动画效果上进行了扩展，所以使用时可以根据jQuery原有的动画函数进行扩展。

1.jQuery默认动画

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果，使用代码如下：

$(element).slideUp({ 
    duration: 1000,  
    easing: method,  
    complete: callback 
});

参数duration：定义动画运动时间，毫秒，其实就是速度，时间越短，运动速度越快。

参数easing：指定动画效果，Easing js提供多种动画效果，有匀速运动、变加速运动、缓冲波动效果，它们是：linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，easeInQuart，easeOutQuart，easeInOutQuart， easeInQuint，easeOutQuint，easeInOutQuint，easeInSine，easeOutSine， easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，easeInCirc， easeOutCirc，easeInOutCirc，easeInElastic，easeOutElastic，easeInOutElastic， easeInBack，easeOutBack，easeInOutBack，easeInBounce，easeOutBounce，easeInOutBounce.

参数complete：动画结束后回调函数callback，可以自定义动画结束后的调用函数。

2.使用jQuery自定义动画函数animate()

jQuery Easing结合jQuery的自定义动画函数animate()可以制作各种你想要的动画效果，使用代码如下：

$(element).animate({ 
    height:500, 
    width:600 
    },{ 
    easing: 'easeInOutQuad', 
    duration: 500, 
    complete: callback 
}); 

上面的代码定义了一个缓冲效果的动画，我们可以根据项目需要，结合jQuery Easing制作各种动画效果。

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

点击下载 jQuery Easing