jQuery + Animate.css animation only working once, animation not resetting

Question

I'm trying to reproduce a specific animation each time a button is pressed. Specifically, I'm using `jQuery` and the `animate.css` library for this effect: on button click, a class is added (two classes to be precise: `fadeInDown animated`) to the element I want to animate. The animation does work correctly, but only once. Why is this? Fiddle: http://jsfiddle.net/jqm4vjLj/2/ I want the animation to reset every time I click the button, even if it is halfway through completion from a previous click. It should also work whenever I click the button, not only once. JS: ``` $("#button").click(function () { $("#button").removeClass(); $("#button").addClass("fadeInDown animated"); }); ``` Classes from animate.css: ``` @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px)…

Accepted Answer

See http://css-tricks.com/restart-css-animation/, which discusses this exact problem.

I think the cleanest solution is to wrap the functionality of removing the element and re-inserting it in the same position in the HTML tree in a global function. Then, when you want to restart an animation, you just remove the class, call the reset function (grabbing the newly-inserted element from the return value), and then add the animation class(es) back to start the animation again.

For example:

```
function reset($elem) {
    $elem.before($elem.clone(true));
    var $newElem = $elem.prev();
    $elem.remove();
    return $newElem;
} // end reset()

$("#button").click(function () {
    var $this = $(this);
    $this.removeClass();
    $this = reset($this);
    $this.addClass("fadeInDown animated");
});
```

http://jsfiddle.net/jqm4vjLj/6/

This solution provides maximum responsiveness, since the old in-progress animation is automatically ended when the animating element is destroyed, and the newly-inserted element's animation begins immediately.

jQuery + Animate.css animation only working once, animation not resetting

Solution

Problem