読んで覚える,触って体験!JavaScript&CSS3~gihyo.jp×jsdo.it presents

第4回 jQueryでアニメーション(お題編)

この記事を読むのに必要な時間:およそ 4 分

アニメーションの速度

次に第二引数で指定するアニメーションの速度について解説します。第二引数に指定できるのはアニメーションが始まってから終わるまでの秒数(ms)を指定します。

$('#box').animate({ top: 300 }, 1000);

このように指定すると,アニメーションを1000ms(1秒)かけて実行します。完了までの時間なのでここに指定する数字が小さいほど高速でアニメーションするということになります。また,数字だけでなく,slow,fastという文字列を指定できます。これらはそれぞれ,slowが600,fastが200という数字を指定したのと同じことになります。速度を指定しなかった場合のデフォルトは400です。

以下の例では自由にアニメーションの速度を指定できるようにしていますので試してみてください。

変化量

第三引数では変化量を指定します。変化量というのはイージング(easing)と呼ばれるもので,アニメーションがずっと同じ速度で変化するのか,はじめはゆっくりで最後は早く変化するのかといったものを指定するものです。jQueryのanimateで指定できるのはlinearとswingという2つで,デフォルトはswingです。もちろん自分で独自のイージングを設定することも可能ですし,jQuery Easingというプラグインを使えば多数のイージングを使うことが可能です。なお,jQuery Easingはjsdo.itで利用できるライブラリに含まれているので簡単に利用可能です。さまざまなイージングを以下で確認できます。

アニメーション終了後の処理

アニメーションは非同期で動作します。非同期で動作するというのは,終了を待たずに次の処理へ進むということになります。たとえばアニメーションの実行が終わったあとにアラートを出したいという場合に以下のようなコードを書いても期待通りに実行されません。

$('#box').animate({ top: 300 });
alert('animate complete!');

このコードは以下のようになります。

なぜアニメーションが非同期で実行されるのかというと,アニメーションが1分かかる場合,終了を待っていると1分間何も実行されないことになるので,そのようなことがないようにアニメーションなどの処理は通常,他の処理と平行して動作するのです。しかし終了を待たないということは終了後の処理を記述したいときに困ったことになります。そこでコールバックという仕組みで,アニメーション終了後の処理をあらかじめ登録しておいて,終わったら実行するようにします。

$('#box').animate({ top: 300 }, null, null, function() {
    alert('animate complete!');
});

これで期待した動作になります。

著者プロフィール

外村和仁(ほかむらかずひと)

HTMLコーダー,JavaScriptプログラマ,PHP,Perlのプログラマといった職務を経験後,2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用,開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。好きな言語はPythonとJavaScript。JavaScriptの勉強会,jstudyを主催している。

Twitter: @hokaccha