jQuery+easing缓动的动画

jQuery实现动画再简单不过了，只是要实现更酷的效果还需要插件来帮忙，easing就是一款帮助jQuery实现缓动动画的插件，经过试用，效果很不错，记录一下使用方法吧！

下载该插件：jquery.easing.1.3.js　jquery.easing.compatibility.js

演示地址：http://www.11gz.com/demo/js-ajax/easing/index.html

方法介绍：

• def：默认方式设置
• swing：默认方式加载
• Quad：二次方缓动(t)
• Cubic：三次方缓动
• Quart：四次方缓动
• Quint：五次方缓动
• Sine：正弦曲线缓动
• Expo：指数曲线缓动
• Circ：圆形曲线的缓动
• Elastic：指数衰减的正弦曲线缓动
• Back：超过范围的三次方缓动
• Bounce：指数衰减的反弹缓动

关于In、Out、Inout的说明：

• easeIn：加速度缓动；
• easeOut：减速度缓动；
• easeInOut：先加速度至50%，再减速度完成动画。

缓动方式的翻译来自：JavaScript Tween算法及缓动效果

如何应用：

slideUp|slideDown|slideToggle|fadeIn|fadeOut|fadeToggle

$(element).slideUp(duration,easing,[callback]);

fadeTo

$(element).fadeTo(duration,opacity,easing,[callback]);

animate

$(element).animate({properties},duration,easing,callback);

jQuery1.4+版本更可以：

$(element).animate({left:[100,'swing'],top:[100,'easeOutBounce']});

或者

jQuery(myElement).animate({left:100,top:100},{specialEasing:{left: 'swing',top:'easeOutBounce'}});

具体可参阅jquery1.4+的API。