Jquery 在动画结束时递归

只是遇到了一个有趣的问题

我有以下几组图片

<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>

这是可行的，除了它一次消失为两个，即两个一起消失，然后是另两个，然后是最后的两个……

任何关于如何修复此问题的建议，或更好地实现此类功能的方法，都将不胜感激！

干杯，伙计们

---

结果（哎哟）：
调用了两次

AnimateTimeline（）

函数，因此分配了两次动画，然后将递归算法触发的次数加倍。

区间函数可能不如递归函数聪明，但解释起来可能更简单

要隐藏除第一个图像div以外的所有图像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);

---

请注意，为了简单起见，我对您的div进行了定位。这是不必要的，但需要更复杂的计时。

我只需要使用数组作为对象的队列，并将其弹出直到为空，而不是检查

：visible

选择器。如果渲染有一些有趣的地方，那也不会令人惊讶。这毕竟是javascript。非常感谢您的回答！这看起来似乎可以解决我的问题，但我也想找出为什么我的递归算法不起作用，以供将来参考。。再次感谢！

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);