jQueryで要素にアニメーション動作をつけた際、単調な動きだけでなく、加速・減速など動きに強弱のついたエフェクト、イージング（easing）処理をつけることが出来ます。
jQueryのノーマル状態では、イージング処理は「linear」と「swing」の２つが用意されていますが、プラグインを使うことによってアニメーションに多種多様なイージング処理をつけることができるようになります。
そんなイージング処理を、様々なパターンで簡単につけることが出来るプラグインを２つ、イージング動作サンプルと併せて紹介してみます。
jQuery Easing Plugin［jquery.easing.js］
jQuery Easing Plugin［jquery.easing.js］
jQuery Easing – jQuery 日本語リファレンス
もはやjQueryのイージング処理では定番のプラグイン。
プラグインファイル「jquery.easing.js」を読み込んだ後、jQueryアニメーション「.animate()」の処理を記述する際に、使用するイージング処理の種類（名前）を記述します。
jQueryノーマル状態で使える「linear」と「swing」の2つのイージング処理と併せて、このjQuery Easing Plugin［jquery.easing.js］でつけられるイージング処理を以下に一覧にしてまとめてみました。
リスト左にあるイージング名をもとに、それぞれ黒い■をクリックしてみてください。
※アニメーション速度は「MotionSpeed」の値を変えることでスピードを変えることが出来ます。
イージング処理の記述方法は簡単で「.animate()」の動作の後ろに付けたいイージング名を記述するだけです。
※「linear」の場合
◆SCRIPT
$('○○○○').animate({○○○○},1000,'linear');
続いて２つ目。
jquery.easie.js
こちらも一つ目の「jQuery Easing Plugin」と同様に、プラグインファイル「jquery.easie.js」を読み込んだ後、jQueryアニメーション「.animate()」の処理を記述する際に使用するイージング処理の種類（名前）を記述するだけです。
この「jquery.easie.js」でつけられるイージング処理のサンプル動作一覧は以下になります。
リスト左にあるイージング名をもとに、それぞれ黒い■をクリックしてみてください。
※アニメーション速度は「MotionSpeed」の値を変えることでスピードを変えることが出来ます。
こちらの使い方も同様に使用するイージング名を「.animate()」の動作の後ろに記述するだけです。
※「easieLinear」の場合
◆SCRIPT
$('○○○○').animate({○○○○},1000,'easieLinear');
以上２つのjQueryアニメーションにイージング処理をつけることが出来るプラグインの紹介でした。
イージング処理をつけることで、単調なアニメーション動作ではなく、よりリアリティのある動きに仕上げることが簡単に出来ます。
jQueryアニメーションにイージング処理をつける際の参考にぜひ。。。