javascript - 使用 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 接 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>