There is a div element with the class whatever:
<div class="whatever"></div>
Also, there is a button with the class animate:
<button class="animate">Animate</button>
Clicking on the button will initiate a 10-second animation on the div, involving bouncing, fading, dancing, rotating, or any other effect you can imagine.
Once the animation on the div is complete, an alert is triggered through an animationend event.
The code for this functionality is as follows:
$("button.animate").click(function() {
$("div.whatever").addClass("animationThatSeemsCool").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
alert("Whatever has finished animating!");
});
});
However, a new button has been introduced!
This button has the class nukeit:
<button class="nukeit">Wipe whatever out!</button>
When the 'nukeit' button is clicked, it removes the 'whatever' div entirely:
$("button.nukeit").click(function() {
$("div.whatever").remove();
});
Everything works well so far, but a problem arises:
If the user clicks on the 'animate' button and then quickly presses the 'nukeit' button while the 'whatever' div is still in the middle of its animation, the animationend event will not be triggered, and the alert will not be shown.
Is there a way to manually trigger the animationend event when the 'nukeit' button is pressed?
Update:
For a demonstration along with the attempt to manually trigger the animationend event, check out this JSFiddle link: