jQuery的可点击下拉与CSS动画的问题

Question

请看看这个小提琴：https://jsfiddle.net/willbeeler/tfm8ohmw/

HTML：

<a href="#" class="roll-btn">Do it! Roll me down and up again!</a> 
<ul class="roll-btns"> 
<li><a href="#" class="control animated noshow one">Milk</a></li> 
<li><a href="#" class="control animated noshow two">Eggs and Cheese</a></li> 
<li><a href="#" class="control animated noshow three">Bacon and Eggs</a></li> 
<li><a href="#" class="control animated noshow four">Bread</a></li> 
</ul> 

jQuery的

$('.roll-btn').click(function() { 

    var ctrls = '.control'; 

    if ($(ctrls).hasClass('noshow')) 
    { 
    $(ctrls).each(function() { 
     $(this).removeClass('noshow'); 
     $(this).addClass('fadeInDown'); 
    }); 
    } else { 
    $(ctrls).each(function() { 
     $(this).removeClass('fadeInDown'); 
     $(this).addClass('fadeOutDown'); 
    }); 
    } 

}); 

这是一个非常简单的事情，但我在执行时遇到问题。基本上，类“noshow”是A元素的切换。如果它不存在，则将CSS动画添加到A元素。如果CSS动画存在，则添加另一个CSS元素以隐藏A元素。我试过推迟“noshow”课，其他方法无济于事。整个示例在前两次点击时都能正常工作，但因为它不添加noshow类，所以在此之后不起作用。基本上，我需要在CSS动画完成播放后的第二次点击后添加noshow类。

Answer 1

$('.roll-btn').click(function() { 

    var ctrls = '.control'; 

    if ($(ctrls).hasClass('noshow') || $(ctrls).hasClass('fadeOutDown')) { 
    $(ctrls).each(function() { 
     $(this).removeClass('noshow'); 
     $(this).addClass('fadeInDown'); 
     $(this).removeClass('fadeOutDown'); 
    }); 
    } else { 
    $(ctrls).each(function() { 
     $(this).removeClass('fadeInDown'); 
     $(this).addClass('fadeOutDown'); 
    }); 
    } 
});