How to listen for a "particular" animation-end on an element?

Question

How can I listen for a particular animationend when multiple animations are triggered on an element. In my case, I designed an overlay song list (containing li's which when hovered over will trigger an animation) which would pop up when list icon is clicked. The issue is not however brining the menu but closing it. I made a chevron down icon in the overlay song list which would technically slide it down but in my case it shows an abrupt behaviour. I inspected and discovered that some previous animations that were defined on "i" tag and "li" were causing it to misbehave (particularly due to animation end on "i" and "li" tag and the chevron down icon simultaneously). I wonder if I can listen for a particular animation end on chevron down rather than many animations triggered on the general "i" and "li" tag. P.S I'm sorry if that's a little clumsy.

      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");
  });

Answer 1

Referring to animationend event and animationName on MDN there is an event property named animationName. So you can check for the CSS animation name in the animationend event like:

$("#headphones").on("animationend", function(event){
   if (event.animationName !== 'example') {
       return;
   }
   $(this).removeClass("animated pulse");
   $("img").removeClass("animated pulse");
});

(It is supported in every major browser, see Can I Use animationName).