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

2 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

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

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

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

前提 / jQuery / JavaScript / 関連

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

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