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

这是有效的，除了它一次淡入 TWO ，即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。这不是必要的，否则需要更复杂的时间。

递归动画结束

1 个答案: