jQuery Clickable Dropdown with CSS Animation issue

Question

Please check out this fiddle: 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');
    });
  }

});

This is a pretty simple thing, but I'm having trouble implementing it. Basically, the class "noshow" is a toggle for the A elements. If it does not exist, then add the CSS animation to the A element. If the CSS animation exists, add another css element to hide the A elements. I've tried delaying the "noshow" class, and other methods to no avail. This entire example works correctly with the first two clicks, but because it doesn't add the noshow class, it won't work after that. Basically, I need to add the noshow class on the second click AFTER the CSS animation gets done playing.

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