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

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

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

並列なアニメーション

連続したアニメーションではなく,同時にアニメーションしたい場合もあるでしょう。同時にアニメーションする場合,前述したプロパティの複数指定でも可能ですが,その場合は速度などをそれぞれのアニメーションに指定するということができません。その場合は以下のように記述します。

$('#box')
  .animate({ top: 300 }, {
    duration: 2000,
    queue: false
  })
  .animate({ left: 300 }, {
    duration: 1000
  });

queueというのがキューに溜めるかどうかの指定で,これをfalseにするとキューに溜めずにすぐに次のアニメーションに移行します。durationというのはアニメーションの速度です。これでそれぞれのアニメーションは違う速度で並列に実行されます。

stepを使って処理毎に関数を実行する

stepにコールバック関数を設定することにより,アニメーション中に値が書き換わるごとに登録した関数を実行することができます。この関数が呼ばれるのは値が書き換わったときなので,設定した速度やイージングなどによっていつ,何回呼ばれるかは変わってきます。stepは以下のように記述します。

$('#box').animate({ top: 300 }, {
  duration: 2000,
  step: function(now) {
    $now.text( now + 'px' );
  }
});

これで今topの値がいくつなのかを画面に表示することができます。

プロパティごとにイージングを設定する

animateでは複数のプロパティを同時に指定できますが,それらに対してそれぞれで異なるイージングを指定することが可能です。これにより複雑なアニメーションが可能になります。以下のように指定します。

$('#box').animate({
  top: [300, 'easeOutBounce'],
  left: [300, 'linear']
}, 1000);

もしくは以下のように書いても同じです。

$('#box').animate({
  top: 300,
  left: 300
}, {
  duration: 1000,
  specialEasing: {
    top: 'easeOutBounce',
    left: 'linear'
  }
});

これは以下のように動作します。

今回のお題

今回のお題はタブ切り替えのコンテンツにアニメーションを追加してリッチなUIにするというものです。以下のような単純にshowとhideで切り替えるだけのものを作成したのでこれのタブ切り替えをかっこいいアニメーションで切り替わるようにしてください。

fadeIn,fadeOutなどの簡単なものでもいいですし,animateやイージングを駆使しての独自のアニメーションにも挑戦してみてください。

著者プロフィール

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

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

Twitter: @hokaccha