Question

通过以下内容，我会在永久持续的循环中淡入和淡出div。

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

这工作正常，但我需要稍微更改一下。我有4个div s选择器的目标。我希望第一个在目前的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);
});

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

2 个答案: