隊列單獨連續動畫，並按順序運行，而不是重複運行

Question

我想我對jQuery的瞭解足以讓我陷入困境。我有三個連續的動畫，我很滿意。但現在需要它們按順序運行並重復。我不確定排隊或settimeout。想想我只需要重寫和合並，但不確定最好的方法。 將我的代碼簡化爲JSFIDDLE。

$(document).ready(function() { 
    var $pulse = $('.a'); 
    function runIt() { 
     $pulse.animate({margin:"0 0 0 150px",opacity:"1"}, 1100) 
     .animate({margin: "100px 0 0 150px",opacity:"0"}, 1400, 
     function() { 
     $pulse.removeAttr("style"); 
     runIt(); 
     }); 
    } 
    runIt(); 
}); 

// 

$(document).ready(function() { 
    var $pulse = $('.b'); 
    function runIt() { 
     $pulse.animate({margin:"100px 0 0 150px",opacity:"1"}, 1100) 
     .animate({margin: "200px 0 0 150px",opacity:"0"}, 1400, 
     function(){$pulse.removeAttr("style"); 
     runIt(); 
     }); 
    } 
    runIt(); 
}); 

// 

$(document).ready(function() { 
    var $pulse = $('.c'); 
    function runIt() { 
     $pulse.animate({margin:"200px 0 0 150px",opacity:"1"}, 1100) 
     .animate({margin: "300px 0 0 150px",opacity:"0"}, 1400, 
     function(){$pulse.removeAttr("style"); 
     runIt(); 
     }); 
    } 
    runIt(); 
}); 

JSFIDDLE

Answer 1

有了這個：

$(document).ready(function() { 
    var $pulse1 = $('.a'), $pulse2 = $('.b'), $pulse3 = $('.c'); 

    function runIt1() { 
     $pulse1.animate({margin:"0 0 0 150px",opacity:"1"}, 1100) 
     .animate({margin: "100px 0 0 150px",opacity:"0"}, 1400, function(){ 
      $pulse1.removeAttr("style"); 
      runIt2(); 
     }); 
    }  

    function runIt2() { 
     $pulse2.animate({margin:"100px 0 0 150px",opacity:"1"}, 1100) 
     .animate({margin: "200px 0 0 150px",opacity:"0"}, 1400, function(){ 
      $pulse2.removeAttr("style"); 
      runIt3(); 
     }); 
    } 
    function runIt3() { 
     $pulse3.animate({margin:"200px 0 0 150px",opacity:"1"}, 1100) 
     .animate({margin: "300px 0 0 150px",opacity:"0"}, 1400, function(){ 
      $pulse3.removeAttr("style"); 
      runIt1(); 
     }); 
    }  
    runIt1(); 
}); 

在這裏工作：http://jsfiddle.net/edgarinvillegas/ntxsS/1/

歡呼聲中，來自拉巴斯，玻利維亞