FadeOut menu onClick function

Question

Ok, I give up. After trying to google and changing my code. I'm going to ask this here. I have a click function .navTrigger which displays my nav menu's li one after another. This is working like it should.

Only when I click on the .navTrigger again I would like to have it fadeOut again (It would be awesome if it could be with a delay again). I just can't get my head around how to get this working? (probably pretty simple)...

Here is my code:

$('.navTrigger').click(function() {
    $(this).toggleClass('active');
    var delay = 1000;
    $('nav ul > li a').each(function() {
        $(this).delay(delay).fadeIn(500);
        delay += 400;
    });
});

I have tried replacing toggleClass with addClass and then add

if ($('.navTrigger').hasClass('active')) {
    var delay = 1000;
    $('nav ul > li a').each(function() {
        $(this).delay(delay).fadeIn(500);
        delay += 400;
    });
} else {
    var delay = 1000;
    $('nav ul > li a').each(function() {
        $(this).delay(delay).fadeOut(500);
        delay += 400;
    });
}   

But yeah, that didn't work either... any help would be awesome!

Answer 1

You're second snippet seems like it was almost right.

I've not seen your HTML structure but you should be able to switch the functions around and also add and remove the active class:

$('.navTrigger').click(function(){

var delay = 1000;

if ($('.navTrigger').hasClass('active')){

    $('nav ul > li a').each(function(){
       $(this).delay(delay).fadeOut(500);
       delay += 400;
    });

    $('.navTrigger').removeClass('active');

} else {

    $('nav ul > li a').each(function(){
       $(this).delay(delay).fadeIn(500);
       delay += 400;
    });

    $('.navTrigger').addClass('active');
}

});

nav ul > li a {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="navTrigger">Menu</button>

<nav>
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
</ul>

You could also reverse the fade out using the answer to this StackOverflow Answer by Joe:

$('.navTrigger').click(function(){

var delay = 1000;

if ($('.navTrigger').hasClass('active')){

    $($('nav ul > li a').get().reverse()).each(function() {
       $(this).delay(delay).fadeOut(500);
       delay += 400;
    });

    $('.navTrigger').removeClass('active');

} else {

    $('nav ul > li a').each(function(){
       $(this).delay(delay).fadeIn(500);
       delay += 400;
    });

    $('.navTrigger').addClass('active');
}

});

nav ul > li a {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="navTrigger">Menu</button>

<nav>
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
</ul>

Answer 2

Add this line in click function $(this).toggleClass('active');

$('.navTrigger').click(function(){
$(this).toggleClass('active');
if ($('.navTrigger').hasClass('active')){
    var delay = 1000;
        $('nav ul > li a').each(function(){
            $(this).delay(delay).fadeIn(500);
            delay += 400;
    });
} else {
    var delay = 1000;
        $('nav ul > li a').each(function(){
            $(this).delay(delay).fadeOut(500);
            delay += 400;
    });
}


});