Как прослушать «конкретный» конец анимации элемента? ⇐ Jquery

[Anonymous]

Как я могу прослушивать определенное завершение анимации, когда на элементе запускается несколько анимаций. В моем случае я разработал наложенный список песен (содержащий символы li, которые при наведении на них вызывают анимацию), который будет всплывать при нажатии на значок списка. Однако проблема не в открытии меню, а в его закрытии. Я сделал значок шеврона вниз в списке песен, который технически сдвигал бы его вниз, но в моем случае это показывает резкое поведение. Я проверил и обнаружил, что некоторые предыдущие анимации, которые были определены в тегах «i» и «li», вызывали неправильное поведение (особенно из-за одновременного завершения анимации по тегам «i» и «li» и значку шеврона вниз). Интересно, смогу ли я прослушать определенное окончание анимации при опускании шеврона, а не множество анимаций, запускаемых общим тегом «i» и «li». P.S. Извините, если это немного коряво.

Код: Выделить всё

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

Подробнее здесь: https://stackoverflow.com/questions/531 ... an-element