fadeInがリセット後に動作しない

Question

fadeInとfadeOutは '＃img9'まで機能し、その後は '＃img1'の代わりに が再びフェードインすると消えます。私は同様の質問を見てきましたが、私は答えを見つけることができません。

<script src="~/Scripts/jquery-1.10.2.js"></script> 
<script type="text/javascript"> 
$(function() { 
    var currentImg = 1; 
    $('#img1').fadeIn(300); 
    $('img').on('click', switchImg); 

    function switchImg() { 
     $('#img' + currentImg).fadeOut(500).delay(250, updateImg);  
    } 

    function updateImg(){ 
     currentImg++; 
     if (currentImg > 9) { 
      currentImg = 1; 
     } 
     $('#img' + currentImg).fadeIn(500); 
    } 
}); 
</script> 


<div class="row"> 
<div class="col-md-8 col-md-offset-2" style="width:600px"> 
    <img src="~/Content/Images/Cplusplus.jpg" class="img-responsive" style="display:none" id="img1"/> 
    <img src="~/Content/Images/HelloWorld.jpg" class="img-responsive" style="display:none" id="img2"/> 
    <img src="~/Content/Images/Java.jpg" class="img-responsive" style="display:none" id="img3"/> 
    <img src="~/Content/Images/KeepCalm.png" class="img-responsive" style="display:none" id="img4"/> 
    <img src="~/Content/Images/NodeJS.png" class="img-responsive" style="display:none" id="img5"/> 
    <img src="~/Content/Images/NotCalm.png" class="img-responsive" style="display:none" id="img6"/> 
    <img src="~/Content/Images/Python.png" class="img-responsive" style="display:none" id="img7"/> 
    <img src="~/Content/Images/Ubuntu.png" class="img-responsive" style="display:none" id="img8"/> 
    <img src="~/Content/Images/VisualStudio.jpg" class="img-responsive" style="display:none" id="img9"/> 
</div> 

Answer 1

わからない理由が、遅延を削除しても問題が解決します

$('#img' + currentImg).fadeOut(500, updateImg); 

例： http://codepen.io/nilestanner/pen/YWbEgN?editors=1010

（私はH2タグにIMGSを変更）