jQuery -detecting, если завершена анимация CSS

Question

Просто загрузите быстрый модальный скрипт, и я попал в стену.

Тестирование анимации css и все работает отлично. Я могу открыть модальный из ссылки, но когда я пытаюсь открыть то же модальность снова сразу после по какой-то причине

.one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", 
    function(e){ 
     modalBg.removeClass('flex fadeOut animated'); 
     $(this).off(e); 

    }); 

увольняет мгновенно ... Когда я пытаюсь нажать другую ссылку каждый раз, когда он работает отлично. Я попытался установить нулевую переменную modalBg, и она делает трюк, но консоль возвращает ошибку, которая не определена removeClass. Поэтому по какой-то причине modalBg.removeClass('flex fadeOut animated'); все еще запущен.

Вот JSBin

Вот весь код:

$(document).ready(function() { 

$(".modal-link").on("click", function() { 

     attribute = $(this).attr('href'); 
     attribute = attribute.replace('#',''); 
     console.log(attribute); 

     $('.modal-bg[data-modal='+ attribute +']').addClass("flex animated fadeIn"); 
     $('.modal-bg[data-modal='+ attribute +'] .modal').addClass("animated fadeInDown"); 
}); 

$('.modal-close').on('click', function() { 
    modalBg = $(this).closest('.modal-bg'); 
    modalBg.removeClass('fadeIn'); 
    modalBg.addClass('fadeOut'); 
    modalBg.one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", 
    function(e){ 
     modalBg.removeClass('flex fadeOut animated'); 
     $(this).off(e); 

    }); 
    }); 
}); 

Answer 1

Заменить офф (е) с

$(this).off("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd");