从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数:
引入之后,easing参数可选的值就有以下32种:
jQuery.extend( jQuery.easing, { easeOutExpo: function (x, t, b, c, d) { return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, easeOutBounce: function (x, t, b, c, d) { if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } }, });
使用jQuery自定义动画函数animate来指定easing效果,如自定义一种类弹簧效果的动画:
$(myElement).animate({ top: 500, opacity: 1 }, 1000, 'easeOutBounce');
值得一提的是jQuery 1.4版本中对animate()方法,easing的方法进行了扩展,支持为每个属性指定easing方法,详细请参考这里,如:
//第一种写法 $(myElement).animate({ left: [500, 'swing'], top: [200, 'easeOutBounce'] }); //第二种写法 $(myElement).animate({ left: 500, top: 200 }, { specialEasing: { left: 'swing', top: 'easeOutBounce' } });
使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果,以下两种方法都可以:
$(myElement).slideUp(1000, method, callback}); $(myElement).slideUp({ duration: 1000, easing: method, complete: callback });