Take a look at this interesting fiddle: https://jsfiddle.net/willbeeler/tfm8ohmw/
HTML:
<a href="#" class="roll-btn">Press me! 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 may seem simple, but I'm facing challenges in its implementation. Essentially, the "noshow" class acts as a toggle for the A elements. If it's not present, then apply the CSS animation to the A element. If the CSS animation is present, add another CSS element to conceal the A elements. I've experimented with delaying the "noshow" class and other techniques without success. While this example functions correctly on the first two clicks, it fails thereafter due to the absence of the noshow class being added. In essence, I need the noshow class to be included on the second click AFTER the completion of the CSS animation.