使用 animate.css 重复动画循环答案

【问题标题】：Repeating animation loop with animate.css使用 animate.css 重复动画循环
【发布时间】：2016-08-01 17:28:25
【问题描述】：

我正在使用 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 函数检测动画何时结束”。但我仍然不知道如何使用它来实现我的目标。

【问题讨论】：

标签： javascript jquery html css animation

【解决方案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>

【讨论】：