Question

我正在寻找我的问题的解决方案并试图用动画css3或setInterval解决它但没有效果

我想要什么？

我想把这个动画作为加载器，它意味着它无限循环这是我想要顺时针逐渐淡出的徽标。

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

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

Answer 2

SetInterval有效。您需要在间隔开始之前调用该函数：

runIt();

setInterval(function() {
  runIt();
}, 3600);

CodePen示例here。

动画fade的间隔fadeOut

2 个答案: