jQueryで、画像クリック→フェードイン

初めまして。私は大学の課題でウェブサイトを作成しており、jQueryを勉強しています。
かなりの初心者なのです。

今jQueryでイメージギャラリーのようなものを作っていて、小さい画像にマウスオーバーで触れると、となりに大きい画像がフェードインしつつ表示されるというようにしたいです。
DW上では画像もかわりますし、フェードインもうまくいったのですが、ブラウザで見てみると、画像がぱっと変わるだけでフェードインの効果が反映されていません。
これは何故なのでしょうか・・・。
スクリプトの例は以下です。

$(function(){
$("img.top1").mouseover(function(){

　　$("#mainimg img").attr("src","img/topimg1.jpg");
　　$("#mainimg p:not(:animated)").fadeIn("slow");

})　・・・・

小さい画像のtop1に触れると、divのmainimgという範囲の画像が、top1からtopimg1に変わって、なおかつフェードインされるという風に書いたつもりです・・・。
#mainimgの「p」は、htmlでは、<p id="fadeIn"><img src="img/topimg1.jpg" width="539" height="343" /></p>
というように、#mainimgの範囲のimg要素（大きい画像が表示されるところ）の前に、id名にfadeInと入れた部分のpです。

スクリプトに何か問題があるのかどうかもわかりません。
しかしブラウザで作動しないのはおかしいですよね。
どなたか分かる方がいれば教えてくださると嬉しいです。
よろしくお願いいたします。

No.1 ベストアンサー 回答者： yyr446 回答日時： 2010/12/10 09:58

すでに表示されているから、フェードインしないだけだと思いますけど。

それに、p:not(:animated)　の意図が不明です。
素直に、

<img class="top1" src="img/S_topimg1.jpg">
<div id="mainimg">
<p id="fadeIn">a<img src="img/topimg1.jpg" width="539px" height="343px"></p>

$(function(){
$("img.top1").mouseover(function(){
$("#mainimg img").hide();
$("#mainimg img").attr("src","img/topimg1.jpg");
$("#mainimg img").fadeIn("slow");
});
})

じゃだめなの。
あるいは$.toggle()を使うとか．．．

この回答へのお礼

できましたぁ！！！
ほんとに自分が分かってなさすぎでした・・・。
もっと勉強しなきゃですね。
ありがとうございました！

お礼日時：2010/12/10 14:57