jQueryのフェードイン・アウト効果について
いつもお世話になります。
jQueryを使いタブメニューに画像ボタンを使って内容の切り替えをし、切り替え時にフェードイン・アウトの効果を出したいと思います。
以下がソースです。
<!-- html -->
<div id="wrapper">
<ul id="tabMenu">
<li class="tab_a"><img src="tab1.png"/ ></li>
<li class="tab_b"><img src="tab2_2.png" /></li>
<li class="tab_c"><img src="tab3_2.png" /></li>
</ul>
<div id="tab_a">
tab_aの内容
</div>
<div id="tab_b">
tab_bの内容
</div>
<div id="tab_c">
tab_cの内容
</div>
</div>
<!-- jQuery -->
var img_dir = "http://www.hogehoge.com/images/";
jQuery(function(){
// tab_aボタンをクリックした時の処理
jQuery(".tab_a").click(function(){
jQuery("#tab_a").css("display", "block"),
jQuery("#tab_b").css("display", "none"),
jQuery("#tab_c").css("display", "none"),
jQuery(".tab_a img").attr("src", img_dir + "tab1.png"),
jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"),
jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"),
});
// tab_bボタンをクリックした時の処理
jQuery(".tab_b").click(function(){
jQuery("#tab_a").css("display", "none"),
jQuery("#tab_b").css("display", "block"),
jQuery("#tab_c").css("display", "none"),
jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"),
jQuery(".tab_b img").attr("src", img_dir + "tab2.png"),
jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"),
});
// tab_cボタンをクリックした時の処理
jQuery(".tab_c").click(function(){
jQuery("#tab_a").css("display", "none"),
jQuery("#tab_b").css("display", "none"),
jQuery("#tab_c").css("display", "block"),
jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"),
jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"),
jQuery(".tab_c img").attr("src", img_dir + "tab3.png"),
});
});
上記のコードでタブの切り替えは出来ましたが、ここからどう追記すれば切り替え時にフェード効果を付けれるのか分かりません。
やり方を検索し調べてはいるものの、解決に至らないので相談させていただきました。
よろしくお願いします。
お礼
ご回答ありがとうございます！ お教え頂いた箇所を変更、追加でdivタグが表示されました！ これで思っていることができそうですごく嬉しいです！ 本当にありがとうございました！！