[jQuery] オリジナルのeasingを作る方法

概要

jQuery には標準でlinearとswingの easing 関数があります。「jQuery Easing Plugin」を併用することで 32 種類の easing 関数を使うことができます。

「jQuery Easing Plugin」は非常に便利なプラグインですが、正直なところ 32 種類すべてを使うようなことはまずありません。

easing 関数をカスタマイズする

$.extend($.easing, {
  easeInQuad: function (x, t, b, c, d) {
    return c * (t /= d) * t + b;
  },
  originalEasing: function (x, t, b, c, d) {
    return -c * (t /= d) * (t - 2) + b;
  },
});

例えば、予め上記の\$.extendように定義しておくことで、以下のようにオリジナルの easing を使用できる。

$("#hoge").animate({ marginLeft: "50px" }, 300, "originalEasing");