JavaScript:jQueryイージングの確認用アニメーションとサンプルコード一覧

おなじみeasingのカーブの名称と動きを忘れがちなので、アニメーションサンプルをjQuery日本語リファレンスを参考にみやすくまとめました。

サンプルコードを出力しているので、コピーペーストで即使用が可能です。コーディング時にお役立て下さい。

jQueryイージングのアニメーションサンプル

カーブの名称 or バー をクリックすればアニメーションが確認できます。（最初の読み込みに多少時間がかかります）

まとめ

easeInElastic はどこで使用するのでしょうか（笑）一般的には easeInQuad、easeOutQuad、easeInOutQuad あたりがよく使われていると思います。
動きが楽しいからといってやりすぎにはには注意し、節度をもって使用すればUX向上に一役買ってくれると思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。