Question

我似乎无法让fadeIn() delay工作。

我已阅读有关间隔的负载但它没有帮助，也超时但它目前没有帮助。

我正在调用以下函数onclick，只是希望它以3秒延迟循环然后再次调用从si-1开始（第一个div）

该函数正在循环，但延迟与setTimeout调用不同步，因此在第一个循环后，它开始跳过div，直到它只显示最后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);
}

如果多次点击，它会运行良好的栏！ 这是我的小提琴 http://jsfiddle.net/FvNYy/4/

Answer 1

也许这个：

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

function runAnimation() {
    hiAni(); // hides all si- div's
    $('.si-1').fadeIn(function(){
        $('.si-2').fadeIn(function(){
            $('.si-3').fadeIn(function(){
                $('.si-4').fadeIn(function(){
                    $('.si-5').fadeIn(function(){
                        $('.si-6').fadeIn(function(){
                            $('.si-7').fadeIn(function(){
                                t = setTimeout(function(){runAnimation()},100);
                            });
                        });
                    });
                });
            });
        });
    });
}

Answer 2

这样可行，每个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);
                            });
                        });
                    });
                });
            });
        });
    });
}

Answer 3

这样的事情会起作用吗？我添加了hiAni函数以启用单击以重置动画。随意调整以满足您的需求。

jsfiddle

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

jquery延迟fadein with loop

3 个答案: