jQuery.easing使用说明

最近做特效的时候用到jQuery.easing插件这里将知识点做个备份：

 

jQuery.easing插件中包含了有多的动画特效，其中默认的是swing和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[开始和结束都弹簧]

使用方法：

1）默认用法

$(document).ready(function() {

    jQuery.easing.def = 'easeOutBack';

    $("#btn").click(function(){

        $('#bomb').animate({left:400},1000)；

    });    

});

2)习惯用法

$(document).ready(function() {

    $("#btn").click(function(){

    $('#bomb').animate({left:400},'easeInBack')

    $('#bomb').animate({left:100}, {duration: 1000,easing: 'easeOutBack',complete:scrollDone})

  })；  

});