为什么我的动画卡在循环中？

Question

我看到一些奇怪的行为与我的CSS动画，并希望有人可以帮忙。我基本上使用选择框来选择应该显示哪个<ul>。但是，如果用户选择价值A，选择B值，然后选择再次，动画被扔进一个无限循环A和B.

$('select#month').change(function(){ 
    var s = $('option:selected', this).val(); 

    $('#plan-wrapper ul.visible').addClass('scaleFadeOut').on('animationend', function(){ 
     $(this).removeClass('scaleFadeOut visible').addClass('hidden'); 

     $('#plan-wrapper ul#' + s).removeClass('hidden').addClass('scaleFadeIn').on('animationend', function(){ 
     $(this).removeClass('scaleFadeIn').addClass('visible'); 
     }); 

    }); 
    }); 

之间褪色我目前没有这个网上的任何地方，但我很快就会建立一个临时站点。如果需要，我会用链接更新这篇文章。

编辑：作为承诺，这里是一个临时网站链接：https://lbc.labs.nichols-co.com/vision

我现在可以停止越来越downvotes？

Answer 1

非常感谢/ u/SirHound on reddit。他指出，我需要致电off()删除事件侦听器。 Here is a link to his answer.