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


});

FadeOut菜单onClick功能

2 个答案: