시간 지연이있는 텍스트 회전

Question

텍스트를 여러 번 회전하고 싶지만 다른 easings 및 애니메이션을 사용하여 텍스트를 회전하고 싶지만 너무 길어서 텍스트가 모두 끝나면 끝내지 않습니다. 다시 가다. 누군가가 나에게이

$('.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

당신은 대신에 설정된 제한 시간의 간격을 설정할 수 있습니다

자바 스크립트을 이해할 수있을 것이다 짧은 방법을 말할 수 있다면

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>