How can I ensure that a specific animation ends when multiple animations are triggered on an element? My scenario involves an overlay song list that appears when a list icon is clicked. The challenge lies in closing the menu smoothly. I have implemented a chevron down icon within the overlay song list to slide it down but encountered abrupt behavior. Upon inspection, I found that previous animations defined on the "i" and "li" tags were conflicting with the desired animation end on the chevron down icon. Is there a way to specifically listen for the animation end on the chevron down icon instead of handling multiple animations triggered on various elements like "i" and "li" tags? Apologies if this explanation seems convoluted.
button.list.on("click", function() {
$("#overlay").css("display", "block");
$("#overlay").toggleClass("magictime slideDownReturn");
$("#overlay").on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(e) {
$("#overlay").removeClass("magictime slideDownReturn");
// $("#overlay").css("display", "block");
});
});
$("#chevronDownIcon").on("click", function() {
$("#overlay").toggleClass("animated bounceOutDown");
$("#overlay").on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() {
console.log("Chevron Animation Ended");
$("#overlay").removeClass("animated bounceOutDown");
// $("#overlay").css("display", "none");
});
});
// Animate icons and image
$("i").on("mouseover", function() {
$(this).toggleClass("animated pulse");
$(this).on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() {
$(this).removeClass("animated pulse");
});
});
$("i").on("click", function() {
console.log("Inside i");
$("img").toggleClass("animated pulse");
$("#headphones").toggleClass("animated pulse");
$("#headphones").on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
$(this).removeClass("animated pulse");
$("img").removeClass("animated pulse");
});
$(this).toggleClass("animated zoomIn");
$(this).on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
$(this).removeClass("animated zoomIn");
});
});[enter image description here][1]
// Toggle animation on song list item
$("li").on("mouseover", function() {
$(this).css("color", "black");
$(this).toggleClass("animated pulse");
$(this).on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() {
$(this).removeClass("animated pulse");
});
});
$("li").on("mouseout", function() {
$(this).css("color", "white");
});