使用animate.css重復動畫循環

Question

我正在用animate.css對元素進行動畫處理，並且我有類似以下代碼：

<button class='animated infinite pulse tada'>1</button>
<button class='animated infinite pulse tada'>2</button>
<button class='animated infinite pulse tada'>3</button>
<button class='animated infinite pulse tada'>4</button>
<button class='animated infinite pulse tada'>5</button>

的jsfiddle

如何對按鈕1進行動畫處理並重復？ 例如第一個按鈕先進行特定時間的動畫處理，然后第二個和第三個按鈕進行動畫處理，直到按鈕5結束，然后所有這些動畫一起進行動畫處理，然后最終再次無限地重復整個過程。

從github文檔中說：“您還可以使用Jquery .one函數檢測動畫何時結束”。 但是我仍然不知道如何使用它來實現我的目標。

Answer 1

您可以使用setInterval() ：

var current_button = 0;

setInterval(function()
{
   if(current_button===$('.tada').length)
   {
       $('.tada').addClass('animated');
       current_button=0;
   }
   else
   {
     $('.tada').removeClass('animated');
     $('.tada:eq('+current_button+')').addClass('animated');

     current_button++;
   }
},1000)

希望這可以幫助。

---

 var current_button = 0; setInterval(function(){ if(current_button===$('.tada').length){ $('.tada').addClass('animated'); current_button=0; }else{ $('.tada').removeClass('animated'); $('.tada:eq('+current_button+')').addClass('animated'); current_button++; } },1000) 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class='infinite pulse tada'>1</button> <br/> <br/> <button class='infinite pulse tada'>2</button> <br/> <br/> <button class='infinite pulse tada'>3</button> <br/> <br/> <button class='infinite pulse tada'>4</button> <br/> <br/> <button class='infinite pulse tada'>5</button>