Web制作の現場で使えるjQuery UIデザイン入門 ― 第15回
jQueryでタブパネルを作るチュートリアル
2009年10月19日 11時00分更新
アニメーションでもっとリッチなタブパネルに
サンプル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の実行画面。パネル部分がスライドしながら切り替わる | ||
この連載の記事
- 最終回 実務で使えるjQueryプラグイン3選
- 第25回 制作現場で役立つjQueryプラグインの使い方
- 第24回 jQueryとAjaxで作るスムーズページング
- 第23回 jQuery＋CSSによるカルーセルパネルの作り方
- 第22回 jQueryでバリデーション付きメールフォームを作ろう
- 第21回 jQueryで自作するフローティングウィンドウ
- 第20回 jQueryによるLightbox風モーダルウィンドウの作り方
- 第19回 jQueryで作る多階層ドロップダウンメニュー
- 第18回 IE6対応！jQueryで透過PNGのロールオーバーを作る
- 第17回 jQueryでロールオーバー！プリロード対応版
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
