jquery - jQuery 为每个元素设置动画，但每个元素之间有延迟

Question

通过以下内容，我将div在一个永远持续的循环中淡入淡出。

function fadeOutFunc() {    
    $('.image-list .bottom').delay(5000).fadeOut(500).delay(5000).fadeIn(500,fadeOutFunc);
}
fadeOutFunc();

这工作正常，但我需要稍微改变一下。我有 4 个div选择器的目标。我希望第一个像现在一样在 5 秒后开始制作动画。但是我希望第二个div在 6 秒后开始动画，第三个div在 7 秒后开始动画，第四个div在 8 秒后开始。

最具可扩展性的代码将是即使有超过 4 个div与选择器匹配的代码也能工作的代码。

Answer 1

您需要循环并增加每次迭代的延迟。尝试这个：

$('.image-list .bottom').each(function(i) {
    var initialDelay = i * 1000 + 5000;
    $(this).delay(initialDelay).fadeOut(500).delay(5000).fadeIn(500,fadeOutFunc);
});

Answer 2

使用它来定义延迟。

$('.image-list .bottom').each(function(index, item){ 
   var baseDelay = 5000;
   var delayDifference = 1000;
   delayForThisDiv = baseDelay + (index*delayDifference);
});