javascript - onClick 淡入列表项

Question

这就是我要实现的目标:

1)单击移动导航按钮时 - 打开主导航并向主导航添加一个“active”类，向标题添加一个“dark-header”类。

2)检查主导航是否有一个“事件”类，如果有则循环遍历主导航中的每个列表项并将它们逐一淡入。 (最好从左上角开始，但我还没有弄清楚该怎么做)

我的代码在一定程度上可以正常工作，但导航项不会淡入，所以有些地方不太对劲。它改为这样做:当单击移动导航按钮时，菜单打开，一类“事件”被添加到主导航，并且一类暗标题被添加到标题但我似乎无法得到主要导航元素从左上角依次淡入，而不是它们只出现在点击时。

这是我目前的 HTML 代码:

<!-- site header -->
<header class="site-header">
    <div class="grid-container">
        <div class="grid-20 tablet-grid-50 mobile-grid-50">
            <a class="site-logo" href="#"><img src="images/logo.png" alt="site-logo"></a>
        </div>
        <nav id="main-nav" class="grid-70 tablet-grid-100 mobile-grid-100">
            <ul class="main-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <div class="float-right grid-10 tablet-grid-50 mobile-grid-50">
            <a id="mobnav-btn" class="mobnav-btn">
                <span class="mobnav-icon"></span>
            </a>
        </div>
    </div>
</header><!-- end site header -->

这是我目前的 jQuery 代码(抱歉，如果乱七八糟，我才刚刚开始学习 jQuery):

$('#mobnav-btn').click(function(){
    $('.main-nav').toggleClass("active");
    $(this).parents('.site-header').toggleClass('dark-header');
        if ( $('.main-nav').hasClass(".active") ) {
                $('.main-nav li').each(function(index, element) {
                $(element).delay(index*50).fadeIn(400);
            });
        };
});

非常感谢任何关于我在这方面哪里出错的想法或任何帮助。

Answer 1

改变这个

$(element).delay(index*50).fadeIn(400);

到

$(element).children('a').delay(index*50).hide().fadeIn(400);

引用updated fiddle (注意时间因测试而改变)