animate(params, [duration], [easing], [callback]) - jQuery 日本語リファレンス
animate関数は合計4つの引数をつけることが出来るわけですけども(属性、スピード、イージング、コールバック)、
animate(params, options) - jQuery 日本語リファレンス
独自に作成したり、プラグインを入れなくても使える値は”linear”と”swing”だけです。
初期値は”swing”です。
とのこと。
$("#animate").click(function(){ $(".block").animate( {width: "toggle", opacity: "toggle"}, "slow", "swing" ); });
なので、easeInQuadなど他のイージングを使いたい場合は、
プラグインで拡張しなければならない。
しかし、全部書くのはとかく面倒である。というわけでサンプルコードだと
このように省略して書くことでeaseInQuartのイージングが使えるようにしている。
jQuery.extend(jQuery.easing, { easeInQuart: function (x, t, b, c, d) { return c*(t/=d)*t*t*t + b; }, }); $("#animate").click(function(){ $(".block").animate( {width: "toggle", opacity: "toggle"}, "slow", "easeInQuart" ); });
なぜこういう方法を取れるかというと、ソースコードは130行のソースコードで、イージングのパターン、計算方法を記述しているだけだからである。
つまり、easeOutQuadを使いたいときは、
jQuery.extend(jQuery.easing, { easeOutQuad: function (x, t, b, c, d) { return -c *(t/=d)*(t-2) + b; }, });
と書けばいいし、easeInExpoを使いたいときは、
jQuery.extend(jQuery.easing, { easeInExpo: function (x, t, b, c, d) { return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, });
と書けばいいだけなのである。