FadeOut菜单onClick功能

Question

好的，我放弃了。尝试谷歌和更改我的代码后。我在这里问这个。我有一个点击功能.navTrigger，它一个接一个地显示我的导航菜单的li。这是应该的工作。

只有当我再次点击.navTrigger时，我想再次使用它fadeOut（如果再次延迟可能会很棒）。我只是无法理解如何使这个工作？ （可能很简单）......

这是我的代码：

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

我尝试用toggleClass替换addClass然后添加

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

但是，是的，这也不起作用......任何帮助都会很棒！

Answer 1

你的第二个片段似乎几乎是正确的。

我没有看到你的HTML结构，但你应该能够切换功能，还可以添加和删除active类：

$('.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>

您还可以使用此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

在点击功能$(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;
    });
}


});