Web制作の現場で使えるjQuery　UIデザイン入門 ― 第15回

jQueryでタブパネルを作るチュートリアル (2/3)

アニメーションでもっとリッチなタブパネルに

　サンプル01で作成したタブパネルは機能としては十分ですが、タブをクリックするとパネルが急に切り替わるので、ユーザーにとってはちょっと分かりにくいかもしれません。そこで、パネルの切り替え時にアニメーションを付けて、内容が変化していることをユーザーに伝えるように改良しましょう。

　jQueryではいくつかのアニメーション機能が用意されていますが（関連記事）、ここではスライドアニメーションを使います。サンプル01との違いは、パネルの表示／非表示を切り替える命令を、show()／hide()からslideUp("fast")／slideDown("fast")に変更しただけです。簡単ですね。

▼サンプル02（スクリプト部分）

$(function(){
    $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()
    $("ul.tab li a").click(function(){
        $("ul.tab li a").removeClass("selected")
        $(this).addClass("selected")
        $("ul.panel li").slideUp("fast")
        $($(this).attr("href")).slideDown("fast")
        return false
    })
})

　たったこれだけの工夫で、より分かりやすく、少しリッチなUIになりました。ほかにも、show()をfadeIn()に変更してフェードイン効果を付けたり、animate()を使ってより凝った動きを付けたりもできます。アニメーションエフェクトの解説（関連記事）を参考に試してみてください。

▼サンプル02（実行結果）

サンプル02の実行画面。パネル部分がスライドしながら切り替わる