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

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

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

jQuery組み込みのアニメーション

jQueryのアニメーションはこれまで紹介してきたanimate関数を使えば簡単なアニメーションから複雑なアニメーションまで実装することが可能ですが,よく使うフェードアウトやスライドダウンなどのアニメーションはショートカットが用意されています。

// スライドダウン
$('#box').slideDown();

// スライドアップ
$('#box').slideUp();

// スライドダウン/アップの切り替え
$('#box').slideToggle();

// フェードイン
$('#box').fadeIn();

// フェードアウト
$('#box').fadeOut();

// フェードイン/アウトの切り替え
$('#box').fadeToggle();

これらのショートカット関数にも,animateと同じく,速度,変化量,終了後の処理を指定することができます。

$('#box').sldeDown('fast', 'linear', function() { ... });

もっと高度なアニメーション

アニメーションしている要素の取得

jQueryでは以下のような記述で現在アニメーション中の要素を取得できます。

$(':animated')

これにより,アニメーション中の要素にだけ何か処理をするといったことも簡単に記述可能です。以下の例ではアニメーション中の要素だけ色を変更をするという処理を実装しています。アニメーション前やアニメーション終了後には実行されないのがわかると思います。

アニメーションの停止

アニメーションを実行したときに前回のアニメーションが終わってない場合,前回のアニメーションが終わるまで次のアニメーションはキュー呼ばれるものに溜められ,それまでのアニメーションが全て実行されるまで待ちます。

たとえばボタンを押したときにアニメーションを実行するという処理を実装する際に,ボタンを連打すると予期しない動作になることがあります。これを防ぐためには,アニメーションを行うときには前回のアニメーションを停止しておく必要があります。jQueryのアニメーションを止めるには以下のように記述します。

$('#box').stop();

これまで提示していた例ではすべてこの処理を入れているので参考にしてみてください。

連続したアニメーション

jQueryのアニメーションはただつなげて書くだけで簡単に連続したアニメーションを定義できます。以下のように書くと,topが300になった後0に戻すという処理になります。

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

これも上記で説明したキューというものに溜めて順次処理するためにこのような記述が可能になっています。また,delayという関数を使えば次のアニメーションに移るまでの待ち時間を指定することも可能です。

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

このように記述するとアニメーションの途中で1秒間待ってから再度アニメーションを開始します。

著者プロフィール

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

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

Twitter: @hokaccha