Javascript 带循环的jquery延迟fadein

我似乎无法让一个

fadeIn（）

delay

工作

我读过很多关于interval的文章，但都没有帮助，还有timeout，但目前没有帮助

我正在调用下面的函数

onclick

，只想让它以3秒的延迟循环，然后如果再次调用，则从

si-1

开始（首先

div

）

函数正在循环，但延迟与

setTimeout

调用不同步，因此在第一个循环后，它开始跳过

div

s，直到它只显示最后一个

div

并闪烁

有什么建议吗

代码如下：

function runAnimation() {
    hiAni(); // hides all si- div's
    $('.si-1').delay(0).fadeIn();
    $('.si-2').delay(3000).fadeIn();
    $('.si-3').delay(6000).fadeIn();
    $('.si-4').delay(9000).fadeIn();
    $('.si-5').delay(12000).fadeIn();
    $('.si-6').delay(15000).fadeIn();
    $('.si-7').delay(18000).fadeIn();

    t = setTimeout(function(){runAnimation()},21000);
}

如果你多点点击，它运行良好！ 这是我的js小提琴

也许是这样：

function runAnimation() {
    hiAni(); // hides all si- div's
    $('.si-1').delay(0).fadeIn();
    $('.si-2').delay(3000).fadeIn();
    $('.si-3').delay(6000).fadeIn();
    $('.si-4').delay(9000).fadeIn();
    $('.si-5').delay(12000).fadeIn();
    $('.si-6').delay(15000).fadeIn();
    $('.si-7').delay(18000).fadeIn(function(){
        // Using fadeIn complete callback to run the animation
        t = setTimeout(function(){runAnimation()},100);
    });
}

或者类似这样（在每个元素上触发下一个fadeIn）：

---

这将起作用，每个fadeIn在完成前一个：

function runAnimation() {

    hiAni(); // hides all si- div's

    $('.si-1').fadeIn(3000, function(){
        $('.si-2').fadeIn(3000, function(){
            $('.si-3').fadeIn(3000, function(){
                $('.si-4').fadeIn(3000, function(){
                    $('.si-5').fadeIn(3000, function(){
                        $('.si-6').fadeIn(3000, function(){
                            $('.si-7').fadeIn(3000, function(){
                                t = setTimeout(function(){runAnimation()},21000);
                            });
                        });
                    });
                });
            });
        });
    });
}

---

像这样的东西行吗？我添加了hiAni函数来启用单击重置动画。随时调整以满足您的需要

---

是否要在下一次操作之前等待每个操作完成？请尝试此操作

function runAnimation() {

    hiAni(); // hides all si- div's

    $('.si-1').fadeIn(3000, function(){
        $('.si-2').fadeIn(3000, function(){
            $('.si-3').fadeIn(3000, function(){
                $('.si-4').fadeIn(3000, function(){
                    $('.si-5').fadeIn(3000, function(){
                        $('.si-6').fadeIn(3000, function(){
                            $('.si-7').fadeIn(3000, function(){
                                t = setTimeout(function(){runAnimation()},21000);
                            });
                        });
                    });
                });
            });
        });
    });
}

function hiAni() {
    $('.main').children().stop().removeAttr('style');
}
function runAnimation() {
    $('.main').children().each(function() {
        var t = $(this).index() * 3000;
        $(this).delay(t).fadeIn();
    });
}
$(document).ready(function() {
    runAnimation();
    $('.main').children().on('click', function() {
        hiAni();
        setTimeout(runAnimation, 3000);
    });
});