Animate.css: repeating animations

Question

I use animate.css to create an animation. If an error occurs, the element should bounce:

$target.addClass('animated bounce');

It works well. But if the user does the same, there will be no second animation, since classes have already been added.

So, I am trying to remove the classes after the animation as follows:

$target.addClass('animated bounce');
setTimeout(function(){
    $target.removeClass('animated bounce');
}, 1000);

My question is: if so, how should it be done (I don’t know how long the animation is for exactly), or is there another solution for repeating the animations?

Answer 1

You need to do this:

$('#target').removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    $(this).removeClass();
});

$('#target') in this case is the identifier of your item, change it to your needs.

Answer 2

, ""

function refreshElement(id){
   var el = $(id);
   el.before( el.clone(true) ).remove();
}

Answer 3

AND:

 $target.stop().toggleClass('animated bounce');

animation class is added and removed based on mouse action (input / output). The class will not remain active after exiting the object.

.stop () will stop the animation from repeating several times if someone parries / exits many times before the animation finishes.