jQuery .fadeIn(） 队列的问题

Issue with jQuery .fadeIn() queue

本文关键字：问题 队列 fadeIn jQuery      更新时间：2023-09-26

我在jQuery和淡入淡出循环方面遇到了一个奇怪的问题。让我们看一些代码（在JSFiddle上：http://jsfiddle.net/4fcvze4m/1/）：

$('.spin-block').each(function(index) {
	$(this).delay(index * 200 + 800).fadeIn();
})
.spin-block {
    display: none;
    margin: 5px;
    padding: 10px;
    background: #a00000;
    color: #fff;
}
<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>

基本上就是这样。

所以，有时（这是非常随机的），其中一个块没有出现，主要是第 5 或第 6 个。它可以完美地工作 30 次，并在下次刷新时出现此问题。我尝试了以下解决方法：

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

一切正常时，"调试"日志会显示，但是当缺少一个日志时，控制台仍然为空，即使出现下一个 .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文件，但我不可能把所有东西都放在这里。此外，这几乎是我的 init 函数中发生的第一件事。

我相信

，您面临的问题是由于 Div class在运行时动态更改以及 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。但真正发生的是，动画开始，同时从 Div 5 中删除了类"旋转块"，从而阻止了 Div5 的动画！

相关文章：