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