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