Sergi Sergi - 9 months ago 37
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:


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


$("#two").addClass("animated bounce")


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

     $(this).addClass("whatever animation class");
          $('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(){

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