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

如何逐个为按钮设置动画并重复？例如，第一个按钮首先为特定持续时间设置动画，然后是第二个和第三个按钮，依此类推直到按钮5，之后所有这些按钮一起动画，然后最终无限地重复整个过程。

从github文档中可以看出：＆＃34;您还可以检测动画何时结束＆＃34;使用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)

希望这有帮助。

＆＃13;

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)

＆＃13;

<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>

＆＃13;

使用animate.css重复动画循环

1 个答案: