jQuery Easing 运动效果插件 easing.js

jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果，而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js，使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。

引入Easing js文件

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

使用jQuery Easing

1.jQuery默认动画

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

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

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

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

参数easing：指定动画效果，Easing js提供多种动画效果，有匀速运动、变加速运动、缓冲波动效果，它们是：

jswing
def
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

具体每一个效果是做什么的  可以慢慢试
从上面的可以看出 每一种 都分为 In   Out    InOut
In：是指动画开始的时候 具有这个效果
Out：是指动画结束的时候具有这个效果
InOut：是指动画开始和结束的时候都具有这个效果
Elastic：就是具有弹簧效果的（easeInElastic[开始时弹簧]、easeOutElastic[结束时弹簧]、
easeInOutElastic[开始和结束都弹簧]）

使用方法：

<script type="text/javascript" language="javascript" src="JS/jquery.js"></script>
<script type="text/javascript" language="javascript" src="JS/easing.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $("#xxxx").stop(true,false).animate({left : -320},1500,'easeOutElastic');
    })
</script>