はじめに

前回はjQueryのアニメーション機能について解説し，以下のようなタブのUIをjQueryのアニメーションで切り替えるというお題を出しました。

今回このお題をforkしてもらったコードを紹介しながら解説していきます。

模範解答

まずは模範解答として，以下の作品を紹介します。

この作品はページ切り替えの部分を以下のように変更しているだけです。

$currentPage.fadeOut("fast");
$targetPage.slideDown();

1行目の部分で現在のページがフェードアウトして2行目で表示させるページがスライドダウンで表示されます。jQueryを使うととても簡単にアニメーションすることができるということがわかる作品です。

前回解説したように，jQueryにはあらかじめ用意されているアニメーションのショートカットがあり，fadeIn，fadeOut，slideUp，slideDownなどがそれにあたります。この作品を見てもわかるように，これらの組み合わせだけでも実用的なアニメーションを簡単に作ることできます。

今回のお題のポイント

コールバックを使う

今回のお題のポイントをいくつか解説したいと思います。まず1つ目は，二つのアニメーションを同時に行う場合にコールバックを用いることを検討するという点です。例えばスライドアップの後スライドダウンで表示するようなアニメーションにしたい場合以下のように書いたとします。

$currentPage.slideUp();
$targetPage.slideDown();

これでうまくいくように思いますが，実際はこのようになります。

これだとスライドアップとスライドダウンが同時に実行されるため意図した動作になりません。そこでスライドアップが終わった後にスライドダウンを行うという動作にするため，以下のように変更します。

$currentPage.slideUp(function() {
  $targetPage.slideDown();
});

slideUpの第一引数に関数を指定すると，スライドアップが終わったあとに設定した関数を実行するということになります。これは以下のように動きます。

これで意図した動作になりました。ただしアニメーションによっては同時に行うことを意図していることもあると思うので必ずしもコールバックを使えばいいというわけではありません。