Sergi Sergi - 1 year ago 96
HTML Question

Jquery click animations to happen everytime

I have a few buttons I want to animate with "Animated CSS", the problem is that the animation only happen once. I would like to have the animation happen everytime I click a button. The code:

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download