jQueryのbefore(),after()メソッドについて

Question

<div id="container">
 <div id="navi">
   <div class="pageWrap">
     <div class="page">
     <ul>
       <li><a href="images/photo1.jpg"><img src="images/photo1_thum.jpg"></a></li>
       <li><a href="images/photo2.jpg"><img src="images/photo2_thum.jpg"></a></li>
       <li><a href="images/photo3.jpg"><img src="images/photo3_thum.jpg"></a></li>
       <li><a href="images/photo4.jpg"><img src="images/photo4_thum.jpg"></a></li>
       <li><a href="images/photo5.jpg"><img src="images/photo5_thum.jpg"></a></li>
       <li><a href="images/photo6.jpg"><img src="images/photo6_thum.jpg"></a></li>
       <li><a href="images/photo7.jpg"><img src="images/photo7_thum.jpg"></a></li>
       <li><a href="images/photo8.jpg"><img src="images/photo8_thum.jpg"></a></li>
     </ul>
       <p><img src="images/btn_next.jpg" alt="次へ" class="next"></p>
    </div>
    <div class="page">
      <ul>
       <li><a href="images/photo9.jpg"><img src="images/photo9_thum.jpg"></a></li>
       <li><a href="images/photo10.jpg"><img src="images/photo10_thum.jpg"></a></li>
       <li><a href="images/photo11.jpg"><img src="images/photo11_thum.jpg"></a></li>
       <li><a href="images/photo12.jpg"><img src="images/photo12_thum.jpg"></a></li>
       <li><a href="images/photo13.jpg"><img src="images/photo13_thum.jpg"></a></li>
       <li><a href="images/photo14.jpg"><img src="images/photo14_thum.jpg"></a></li>
       <li><a href="images/photo15.jpg"><img src="images/photo15_thum.jpg"></a></li>
       <li><a href="images/photo16.jpg"><img src="images/photo16_thum.jpg"></a></li>
     </ul>
       <p><img src="images/btn_prev.jpg" alt="前へ" class="prev">
         <img src="images/btn_next.jpg" alt="次へ" class="next">
       </p>
     </div>
     <div class="page">
       <ul>

       <li><a href="images/photo17.jpg"><img src="images/photo17_thum.jpg"></a></li>
       <li><a href="images/photo18.jpg"><img src="images/photo18_thum.jpg"></a></li>
       <li><a href="images/photo19.jpg"><img src="images/photo19_thum.jpg"></a></li>
       </ul>
      <p><img src="images/btn_prev.jpg" alt="前へ" class="prev"></p>
    </div>
 </div>
 </div>
 <div id="main">
   <img src="images/photo1.jpg">
 </div>
</div>

上のhtmlでmainの画像をリスト内の画像に変更する時、

$(function(){
    $("#navi ul li a").click(function(){
        $("#main img").before("<img src='"+$(this).attr("href")+"'>");
        $("#main img:last").fadeOut("slow",function(){
            $(this).remove();
        });
        return false;
    });
    $("img.next").click(function(){
        $(".pageWrap").animate({
            "margin-left":parseInt($("#navi .pageWrap").css("margin-left"))-300+"px"
        },"fast");
    });
    $("img.prev").click(function(){
        $(".pageWrap").animate({
            "margin-left":parseInt($("#navi .pageWrap").css("margin-left"))+300+"px"
        },"fast");
    });
});

とありますが、次のように

  $("#navi ul li a").click(function(){
        $("#main img").after("<img src='"+$(this).attr("href")+"'>");
        $("#main img:first").fadeOut("slow",function(){
            $(this).remove();
        });
        return false;
    });

before→afterにして:last→:firstにするとfadeOutが効きません。
何故か分かりませんので教えていだだけませんでしょうか。

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、変更した後のコードも質問文にコードブロックで追記してください。

[pakumakun]

編集しました。初めて利用するので、遅れてすみません。

Answer 1

「img”」の「”」が全角ですが、実際のコードではどうなっていますか？また、#naviにあたる要素がHTMLにはありません。その二つを修正すれば動きました。

動くサンプル：https://jsfiddle.net/xntLdhye/

Comments

[pakumakun]

ありがとうございます。imgの”は実際には半角になっています。しかし画像は切り替わりますが、どうしてもfadeOutがslowになりません。

[kei344]

それでは問題が起こるHTML/JavaScriptをそのまま質問文に提示することをお勧めします。

[pakumakun]

はい。分かりました。ありがとうございます。

[pakumakun]

全てのコードを提示しました。よろしくお願いします。

[kei344]

https://jsfiddle.net/5p9x4sfw/
動きますね。

[pakumakun]

すみません。言い忘れていました。cssでid="main"のimg画像にposition:absolute;をつけていたのですが、それが関係あったりしますか？

[kei344]

https://jsfiddle.net/2Lnjos5d/
再現しました。imgではなく#mainか、その中にdivを作ってそれにabsoluteをつければ動きます。
https://jsfiddle.net/2Lnjos5d/1/

[pakumakun]

ありがとうございました！jQueryだけでなく、htmlとcssのことについて勉強が必要だと感じました。本当にありがとうございました。