Question

我想用“动画CSS”制作一些按钮，问题是动画只发生一次。我想每次点击一个按钮都会发生动画。代码：

HTML：

<div>
  <button id="one"> Button 1</button>
  <button id="two"> Button 2</button>
  <button id="three"> Button 3</button>
  <button id="four"> Button 4</button>
  <button id="five"> Button 5</button>
  <button id="six"> Button 6</button>   
</div>

JS：

$("#two").click(function(){
  $("#two").addClass("animated bounce")
});

Answer 1

You have to remove the class from the element once the animation has finished. At least that is was is happening on the demo site. Try this...

$('selector').click(function(){
     $(this).addClass("whatever animation class");
     setTimeout(function(){
          $('selector').removeClass("whatever animation class");
     }, 2000); //2000 is the time it takes in milli seconds for the animation to run once.
});



//Here is how he does it on the website...

    $('#selector').removeClass().addClass('animation class').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      $(this).removeClass();
    });

** Edit ** The way he does it is prettier then my original idea. This way you don't have to guess the seconds of the runtime on the animation. Much cleaner.

Jquery点击动画每次都会发生

1 个答案: