seahorsepip seahorsepip - 11 months ago 59
CSS Question

Trigger animationend before remove

I got a div element with class


<div class="whatever"></div>

And a button with class

<button class="animate">Animate</button>

When the button is clicked it will animate the div for 10 seconds, bouncing, fading, dancing, rotating whatever you like to imagine for this example.

The div will trigger and animationend event when it has finished animating showing an alert.

The complete code:

$("button.animate").click(function() {
$("div.whatever").addClass("animationThatSeemsCool").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
alert("Whatever has finished animating!");

All seems to work fine but now there is another button in town!

It's a button with the class

<button class="nukeit">Wipe whatever out!</button>

The button does as the name implies the following:

$("button.nukeit").click(function() {

Everything still seems fine up till now, but there's a problem D:

When a user presses the
button and presses the
button while
is still animating the animationend event will never be triggered and the alert will never show :(

How to manually trigger the animationend event when
is pressed?


Here's a JSFiddle link that does above and tries to trigger the animationend event but it's not working D:

Answer Source

Try this to force the event to trigger:


In relation to your updated question, you only need to trigger one of the listened to events, so 'animationend', for example.