Repeating animation loop with animate.css

Question

I am animating my elements with animate.css and I have codes similar to this:

<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

How do I animate the buttons 1 by 1 and repeat? like for example the first button animate for a specific duration first and then the 2nd and 3rd and so on until button 5 and after that all of them animate together then finally repeat the whole process again infinitely.

From the github documentation it says: "You can also detect when an animation ends" with Jquery .one function. But I still have no idea what to do with it to achieve my goal.

Answer 1

You could use 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)

Hope this helps.

---

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>