jquery - 动画淡入淡出的间隔

Question

我正在四处寻找我的问题的解决方案，并尝试使用动画 css3 或 setInterval 来解决它，但没有效果

我想要完成什么？

我想把这个动画做成加载器，这意味着无限循环 这是我要顺时针一个一个淡入淡出的标志。

为什么 setInterval 不起作用？ 因为每个动画都带有 dealay 并且每个 repeat 延迟不适用。

function runIt() {
    var time = 600;
    $(".first").fadeIn(time).fadeOut(time);
    $(".second").delay(time).fadeIn(time).fadeOut(time);
    $(".third").delay(time*2).fadeIn(time).fadeOut(time);
    $(".fourth").delay(time*3).fadeIn(time).fadeOut(time);
   };
runIt();

EXAMPLE CODEPEN

任何帮助将不胜感激! :)

所有遇到同样问题的人的解决方案:

            function runIt() {
                var time = 600;
                $(".first").fadeIn(time).fadeOut(time, function(){
                    $(".second").fadeIn(time).fadeOut(time, function(){
                        $(".third").fadeIn(time).fadeOut(time, function(){
                            $(".fourth").fadeIn(time).fadeOut(time, runIt); 
                        });
                    });
                });



            };
            runIt();

Answer 1

您可以使用 setInterval，但可能更简洁的解决方案是从最终动画的回调中再次调用 runIt:

function runIt() {
    var time = 600;
    $(".first").fadeIn(time).fadeOut(time);
    $(".second").delay(time).fadeIn(time).fadeOut(time);
    $(".third").delay(time*2).fadeIn(time).fadeOut(time);
    $(".fourth").delay(time*3).fadeIn(time).fadeOut(time, runIt); // call runIt when fadeOut completes
};
runIt();