はじめに
前回はjQueryのアニメーション機能について解説し,
今回このお題をforkしてもらったコードを紹介しながら解説していきます。
模範解答
まずは模範解答として,
この作品はページ切り替えの部分を以下のように変更しているだけです。
$currentPage.fadeOut("fast");
$targetPage.slideDown();
1行目の部分で現在のページがフェードアウトして2行目で表示させるページがスライドダウンで表示されます。jQueryを使うととても簡単にアニメーションすることができるということがわかる作品です。
前回解説したように,
今回のお題のポイント
コールバックを使う
今回のお題のポイントをいくつか解説したいと思います。まず1つ目は,
$currentPage.slideUp();
$targetPage.slideDown();
これでうまくいくように思いますが,
これだとスライドアップとスライドダウンが同時に実行されるため意図した動作になりません。そこでスライドアップが終わった後にスライドダウンを行うという動作にするため,
$currentPage.slideUp(function() {
$targetPage.slideDown();
});
slideUpの第一引数に関数を指定すると,
これで意図した動作になりました。ただしアニメーションによっては同時に行うことを意図していることもあると思うので必ずしもコールバックを使えばいいというわけではありません。