Текст, вращающийся с задержкой по времени

Question

Я хочу снова и снова поворачивать текст, как ротатор цитаты, но я хочу сделать это с различными смягчениями и анимациями. Я нашел способ, но он слишком длинный, и как только весь текст заканчивается, еще раз. Если кто-то может сказать мне короткий путь это будет оценено

$('.first').addClass('animated fadeInUp'); 
      setTimeout(function() 
      { 
       $('.second').show().addClass('animated fadeInUp');}, 1500 
      ); 
      setTimeout(function() 
      { 
       $('.first').show().addClass('animated fadeOutUp');}, 3000 
      ); 
      setTimeout(function() 
      { 
       $('.second').show().addClass('animated fadeOutUp');}, 4500 
      ); 
      setTimeout(function() 
      { 
       $('.third').show().addClass('animated fadeInLeft');}, 6000 
      ); 
      setTimeout(function() 
      { 
       $('.fourth').show().addClass('animated fadeInLeft');}, 7500 
      ); 
      setTimeout(function() 
      { 
       $('.third').show().addClass('animated fadeOutRight');}, 9000 
      ); 
      setTimeout(function() 
      { 
       $('.fourth').show().addClass('animated fadeOutRight');}, 10500 
      ); 

Answer 1

Вы можете использовать набор интервал вместо установленного таймаута

Javascript

var animations = ['fadeInUp', 'fadeOutUp', 'fadeInLeft', 'fadeInRight']; 
$(function(){ 
    var i = 0; 
    var timer = window.setInterval(function(){ 
    $('.mydivs div').eq(i).addClass('animated').addClass(animations[i]); 
    if(i++ == 3) 
    window.clearInterval(timer); 
}, 1500); 
}); 

HTML

<div class="mydivs"> 
    <div class="">first</div> 
    <div class="">second</div> 
    <div class="">third</div> 
    <div class="">fourth</div> 
</div>