Question

我对jQuery和一个衰落循环有一个奇怪的问题。让我们看一些代码（这里是JSFiddle：http://jsfiddle.net/4fcvze4m/1/）：

＆＃13;

$('.spin-block').each(function(index) {
	$(this).delay(index * 200 + 800).fadeIn();
})

＆＃13;

.spin-block {
    display: none;
    margin: 5px;
    padding: 10px;
    background: #a00000;
    color: #fff;
}

＆＃13;

<div class="spin-block">1</div>
<div class="spin-block">2</div>
<div class="spin-block">3</div>
<div class="spin-block">4</div>
<div class="spin-block">5</div>
<div class="spin-block">6</div>
<div class="spin-block">7</div>
<div class="spin-block">8</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

基本上就是这样。

所以，有时（它非常随机），其中一个不会出现，大多数是第5或第6。它可以连续30次完美工作，并在下次刷新时出现此问题。我尝试了一个解决方法：

$('.spin-block')
    .each(function(index) {
        $(this).delay(index * 200 + 800).fadeIn();
    })
    .promise().done(function() {
        console.log('debug');
        $(this).fadeIn();
    });

当一切正常时，＆＃39;调试＆＃39; log show off，但是当有一个丢失时，即使下一个.spin-block出现，控制台也会保持为空。如果我强迫一些块不显示，那么这个解决方法很好地工作并且淡化其余的块（在动画结束后，但我不在乎）：

var i = 800;
$('.spin-block')
    .each(function() {
        i += 200;
        if (i > 1400) {
            $(this).delay(i).fadeIn();
        }
    })
    .promise().done(function() {
        console.log('debug');
        $(this).fadeIn();
    });

就是这样。你知道发生了什么吗？就我测试而言，它在任何浏览器上都是随机的。谢谢！

请注意：我发布的小提琴上没有发生这种情况。我知道它来自我自己的JS文件，但我没有把所有东西放在这里的可能性。此外，这几乎是我的初始化函数中发生的第一件事。

Answer 1

我相信，您面临的问题是由于在运行时动态更改了class Div，以及jQuery动画的异步特性。

此JSFiddle解释相同。从本质上讲，它与您最初创建的Div相同。但是我不是仅仅动画它们（迭代$ .each），而是在$ .each之后再引入一个语句，它将删除与其中一个Div相关联的类。请参阅以下代码：

$(function () {
    $('.spin-block').each(function (index) {
        $(this).delay(index * 200 + 800).fadeIn(1000, fnCallback(index));
    });
    //Removing class dynamically for div 5 alone.
    $('.spin-block').eq(4).removeClass('spin-block');
});

你会期望这会动画所有Div，然后从第5 Div中删除Class。但真正发生的是，动画开始，同时Class“spin-block”从Div 5中移除，从而阻止Div5被动画化！

jQuery .fadeIn（）队列问题

1 个答案: