seahorsepip seahorsepip - 3 months ago 14
CSS Question

Trigger animationend before remove

I got a div element with class

whatever
:

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


And a button with class
animate
:

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

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


The button does as the name implies the following:

$("button.nukeit").click(function() {
$("div.whatever").remove();
});


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

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

How to manually trigger the animationend event when
nukeit
is pressed?

Update:

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

https://jsfiddle.net/seahorsepip/nyvfLee7/

Answer

Try this to force the event to trigger:

$("div.whatever").trigger('animationend');

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

Comments