【jQuery】タブパネルの切り替わりに動きをつける
前回の記事【jQuery】タブパネルの実装とレイアウトで作成したタブパネルに少しだけ改良を加えてパネルが切り替わる際に動きを付けてみたいと思います。
前回作成したjQueryのスクリプトの表示・非表示を切り替えるhide()、show()メソッドをそれぞれ（もしくは片方のみ）アニメーションの命令に書き換えるだけで行えます。
前回作成したスクリプト
– JS –
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ $(".panel > li:not("+$(".selected").attr("href")+")").hide(); $(".tab li a").click(function(){ $(".selected").removeClass("selected"); $(this).addClass("selected"); $(".panel > li").hide(); $($(this).attr("href")).show(); return false; }); }); |
上記の6行目、7行目にあるhide(),showを変更していきます。
パネルの切り替わりにスライドで動きをつける。
|
1 2 |
$(".panel > li").slideUp("fast"); $($(this).attr("href")).slideDown("fast"); |
hide(),show()をそれぞれsldeUp(),slideDownとする事でパネルの切り替えをスライドアニメーションにしています。
引数にfastを指定する事で素早い切り替わりとなります。
パネルの切り替わりをゆっくりにする。
|
1 2 |
$(".panel > li").hide(); $($(this).attr("href")).fadeIn("slow"); |
非表示のhide()はそのままに、表示をするshow()をfadeIn()に変更しゆっくりとパネルが切り替わるように変更しています。
fadeIn()の引数にslowを指定してやる事で更にゆっくり、ふわっとした印象となります。
Follow me!
