画像をフェードアウト＆フェードインで切り替えたい

質問

jQueryを使っています。
「<ul id="cat-list">」の「href」を取得して画像を切り替えています。
その際にフェードアウトして画像が消え、次の画像をフェードインさせながら表示したいと考えています。
(クロスフェードならなお良いです。)

色々試したのですが、フェードのタイミングがうまく合ってくれません。
どのように記述したらいいでしょうか。

<script type="text/javascript">
$(function(){
　$("#cat-list a").click(function(){
　　$("p#cat img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
　　$("p#cat-name").text($(this).text());
　　return false;
　});
});
</script>

<p id="cat"><img src="images/cat01.jpg" alt="ネコ1" /></p>
<p id="cat-name">ネコ1</p>
<ul id="cat-list">
　<li><a href="images/cat01.jpg">ネコ1</a></li>
　<li><a href="images/cat02.jpg">ネコ2</a></li>
　<li><a href="images/cat03.jpg">ネコ3</a></li>
　<li><a href="images/cat04.jpg">ネコ4</a></li>
　<li><a href="images/cat05.jpg">ネコ5</a></li>
</ul>

よろしくお願いします。

回答No.1

fujillin · ベストアンサー

こんなことでしょうか？

$(function(){
　$("#cat-list a").click(function(){
　　var src = $(this).attr("href"), text = $(this).text();

　　$("p#cat img").fadeOut("slow", function(){
　　　$(this).attr({src: src, alt: text}).fadeIn("slow");
　　　$("p#cat-name").text(text);
　　});
　　return false;
　});
});

お礼

ありがとうございます！

attrは複数の属性を同時に設定できるんですね。
勉強になりました！