在动画结束时递归

Question

刚刚遇到一个有趣的问题，..

我有以下 div 张图片。

<div class="dropDown dropDown_2">
    <div><img src="images/Super_Infographic.png"></div>
    <div><img src="images/Super_Infographic.png"></div>
    <div><img src="images/Super_Infographic.png"></div>
    <div><img src="images/Super_Infographic.png"></div>
    <div><img src="images/Super_Infographic.png"></div>
    <div><img src="images/Super_Infographic.png"></div>
</div>

我想实现每张图片一次淡入ONE的效果。
所以我写了下面的JQuery递归算法来这样做：

function AnimateTimeline()
{
    $(".dropDown_2 div").each(function(index, element) {
        if(!$(this).is(":visible"))
        {               
            $(this).fadeIn(2000,function(){AnimateTimeline();});
            return false;
        }           
    });
}

这有效，除了它一次淡入两个，即 2 个一起淡入，然后另一个 2 个，最后一个 2....

任何有关如何解决此问题的建议，或实现此类功能的更好方法，我们将不胜感激！

伙计们干杯！

结果（糟糕）：
AnimateTimeline()函数被调用了两次，因此分配了两次动画，然后加倍了递归的次数算法会触发。

Answer 1

区间函数可能不如递归聪明，但它可能更易于解释。

除了第一张图片外，一些样式可以隐藏所有图片div:

.dropDown_2 > div {
    display: none;
    position: absolute;
}
.dropDown_2 > div:first-child {display: block;}

和脚本：

var i = 1; // second image, to account for first being shown on load
var divs = $('.dropDown_2 > div');

setInterval(function () {
    divs.fadeOut(1000);
    divs.eq(i).fadeIn(1000);
    i++;

    if (i >= divs.length) {i = 0}
}, 3000);

Demo

请注意，为了简单起见，我将您的 div 放在绝对位置。这不是必需的，但否则需要更复杂的计时。

在动画结束时递归

Recurse on animation end

html

recursion

jquery