Question

我正在创建一个动画时间轴（请参阅下面的jsFiddle），其中指定fade in后的条目（左右交替）delay。这是在for循环的帮助下。

如果支持不透明度，我会使用.animate({ opacity: 1 })淡化这些条目。其他.fadeIn()。

对于.animate()和.fadeIn()，有时会跳过一个或多个条目的动画。注意：发生这种情况的可能性很小。

所以我的意图是，在主do-while循环内检查for，如果条目确实可见，如果没有，则再次运行动画。

然而，这似乎导致无限循环。有没有更好的方法来检查这个并重新制作动画？

我已经注释掉do-while部分，在下面的jsFiddle中。

jsFiddle

提前致谢。

已更新jsFiddle ，感谢sweetamylase。

更新2 ：我注意到我的代码的另一部分，即条目上的.hover()事件，如果我的光标在加载时出现在条目上，则不会显示它们时间表。这是因为我的代码中使用了.stop(1, 1).animate()。

$('.timeline .entry').hover(function() {
    $(this).stop(1, 1).animate({backgroundColor: '#f3f3f3'}, 350);

}, function() {
    $(this).stop(1, 1).animate({backgroundColor: '#f8f8f8'}, 350);
});

如何在此部分中仍然使用.stop(1, 1)，因此在快速悬停时，这些悬停动画不会累积？

更新3 ：我现在只使用setTimeout()，仅在指定时间后允许.hover事件。

setTimeout(function() {
    $('.timeline .entry').hover(function() {
        $(this).stop(1, 1).animate({backgroundColor: '#f3f3f3'}, 350);
    }, function() {
        $(this).stop(1, 1).animate({backgroundColor: '#f8f8f8'}, 350);
    });
}, 6000);

Answer 1

问题可能是因为你让jQuery在循环的每次迭代中查找条目，这需要时间，这可能是它有时会跳过条目上动画的原因：

$('.timeline .entry').eq(i).delay(delays[i]).animate({opacity: 1}, 'slow');

最好尽量减少查询的数量，因为这是一项昂贵的操作。所以只需找到一次元素，然后使用你已有的索引迭代它们：

var delays = [600, 950, 1200, 1550, 1750, 2300, 2600, 3100, 3750, 4200];
var entries = $('.timeline .entry');

for (var i = 0, numEntries = delays.length; i < numEntries; i++) {
    if (opacitySupport) {
        $(entries[i]).delay(delays[i]).animate({opacity: 1}, 'slow');
    } else {
        $(entries[i]).delay(delays[i]).fadeIn('slow');
    }
}

仅供参考，我使用[] 数组文字符号而不是调用Array 构造函数，因为我发现它不那么容易引起混淆：http://www.mattlunn.me.uk/blog/2012/04/the-use-of-literals-vs-constructors/ < / p>

jQuery循环中的多个延迟动画，动画有时不会执行

1 个答案: