animate関数のイージングを淡々と拡張していく

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;
                  },
              });

と書けばいいだけなのである。