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

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

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>