2014年に制作した記事を2015/07に加筆修正
エフェクトの動きを加速/減速させるための関数を「イージング」といいます。
jqueryではデフォルトで使えるのは、"linear"と"swing"のみですが、このプラグインを利用すると様々なイージングを利用できるようになります。
このプラグインを使うと、たとえば徐々に幅が広がるアニメーションに初めはゆっくり、中間で加速度が上がり、最後にゆっくり動くといった効果がつけられたり、バウンドしているように見せたりすることができます。
イージングのカスタマイズもできるようです。
jqueryのプラグインなので、jQueryライブラリが読み込まれていることが前提です。
バーをクリックすると動作します。
<div class="test">easeOutBounce - easeInElastic</div>
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
このHTMLコードはあくまで例です。
幅や高さ、背景色などを必要に応じてにcssで指定します。
$(function() {
$('.test').click(function(){
$(this).animate({width: 90}, 'slow', 'easeOutBounce').animate({width: 300}, 'slow', 'easeInElastic');
});
});
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
animate以外にも使えますが、ここではanimateを例にします。
この例ではクリックしたときに動作するようにしましたが、もちろんイベントもマウスクリックに限りません。
このプラグインは汎用性が高いため、ほかのプラグインで一緒に提供される場合があります。
このプラグインについてよく知っておけば、ほかのプラグインを利用するときに、すてきな効果をつけられたりするかもしれません。
なお、複数のプラグインそれぞれにこのjQuery Easing Pluginが含まれていた場合、それぞれにこのプラグインのファイルが必要なわけではなく、一つあれば十分ですので、無駄にファイルを増やさないようにしましょう。