最近做特效的时候用到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})
});
});