Sergi Sergi - 3 months ago 7
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

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.

Comments