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

（我将imgs更改为h2标签）

fade在重置后无法正常工作

1 个答案: