我正在制作一个动画时间轴(请参阅下面的 jsFiddle),其中条目(左右交替)在指定的 延迟
之后淡入
。这需要借助 for
循环。
如果支持不透明度,我将使用 .animate({ opacity: 1 })
淡化这些条目。
否则 .fadeIn()
.
对于 .animate()
和 .fadeIn()
,有时会跳过一个或多个条目的动画。注意:发生这种情况的可能性似乎很小。
所以我的意图是在主 for
循环中使用 do-while
检查条目是否确实可见,如果不可见,则运行再次动画。
但是,这似乎会导致死循环。是否有更好的方法来检查它并重新制作动画?
我已经在下面的 jsFiddle 中注释掉了 do-while
部分。
提前致谢。
已更新 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);
最佳答案
问题可能是因为您让 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');
}
}
仅供引用,我使用了[]
数组文字符号而不是调用数组构造函数,因为我发现它不太容易混淆:http://www.mattlunn.me.uk/blog/2012/04/the-use-of-literals-vs-constructors/
关于javascript - 循环内的jQuery多个延迟动画,动画有时不执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15988802/