jQuery anklickbare Dropdown mit CSS-Animation Ausgabe

Question

Bitte lesen Sie in dieser Geige: 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'); 
    }); 
    } 

}); 

Dies ist eine ziemlich einfache Sache, aber Ich habe Probleme, es zu implementieren. Grundsätzlich ist die Klasse "noshow" ein Schalter für die A-Elemente. Wenn es nicht vorhanden ist, fügen Sie die CSS-Animation zum A-Element hinzu. Wenn die CSS-Animation vorhanden ist, fügen Sie ein weiteres CSS-Element hinzu, um die A-Elemente auszublenden. Ich habe versucht, die "Noshow" -Klasse und andere Methoden ohne Erfolg zu verzögern. Dieses ganze Beispiel funktioniert korrekt mit den ersten zwei Klicks, aber da es die Noshow-Klasse nicht hinzufügt, wird es danach nicht funktionieren. Grundsätzlich muss ich die Noshow-Klasse auf den zweiten Klick hinzufügen, NACHDEM die CSS-Animation abgespielt wird.

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