интервал анимации FadeIn FADEOUT

Question

Я искал вокруг для решения моей проблемы и пытались решить эту проблему с анимацией CSS3 или setInterval, но без эффекта

ЧТО Я ХОЧУ ДОСТИЖЕНИЯ?

Я хочу сделать эту анимацию в качестве загрузчика, это значит, что ее петля бесконечно Это логотип, который я хочу, чтобы fadeIn и Out по одному по часовой стрелке.

Почему setInterval не работает? Потому что каждая анимация с торговлей и каждая повторная задержка не применяются.

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.