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

1 min read

概要

jQuery には標準でlinearswingの 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");

このページをシェアする

Related Articles

近年のWeb開発においてjQueryの利用をやめるべき理由

jQuery の功績と功罪 / 現代の Web 開発と jQuery / jQuery をやめるメリット / jQuery の代替手段 / おわり / Footnotes

Deprecated になった jQuery API を静的に検出する方法

モチベーション / eslint-plugin-no-jquery を導入する / 実行する

jQueryの$.wrap()をJavaScriptで実装する方法

前提 / jQuery / JavaScript / 関連

さすがに`jQuery.noConflict()`は、もう止めよう

概要 / 使われていた理由 / やめる方法