Javascript 单击淡入列表项

这就是我想要实现的目标：

一, 当点击移动导航按钮时，打开主导航并向主导航添加“活动”类别，向标题添加“暗标题”类别

二, 检查主导航是否有“活动”类别，如果有，则循环浏览主导航中的每个列表项，并逐个淡入淡出。最好是从左上角开始，但我还不知道怎么做

我的代码在一定程度上可以在一分钟内工作，但是导航项不会消失，所以有些地方不太正确。而是这样做的：当点击移动导航按钮时，菜单打开，一类“活动”被添加到主导航中，一类黑色标题也被添加到标题中，但我似乎无法让主导航项目从左上角依次淡入，相反，它们只会在点击时出现

以下是我到目前为止的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 -->

---

我非常感谢任何关于我在这件事上出错的想法或任何帮助

您的代码中有一个小错误。你需要更换

if ( $('.main-nav').hasClass(".active") )

与

。未在hasClass方法中指定此行

此行错误

$'.main nav'.hasClass.active

它应该是$'.main nav'.hasClassactive

。检查类时不应该在那里。

更改此选项

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

到

---

请参阅备注更改测试时间

您好，感谢您的快速回复。我删除了句点，但菜单仍然会立即显示，而不会使列表项在循环中褪色。也许这是代码顺序的问题？还有其他想法吗？嗨，谢谢你的快速回复。我删除了句点，但菜单仍然会立即显示，而不会使列表项在循环中褪色。也许这是代码顺序的问题？还有其他想法吗？你能试着做一个JSFIDLE吗。调试代码会更容易是的，我现在就做一个。您是否将元素的样式设置为display:none？或者$element.hide.delayindex*50.fadeIn400；嗨，谢谢你的回复。我尝试了上面的display:none和您提供的jQuery，但都没有用。我已经创建了一个非常基本的JSFIDLE，虽然这里的链接还可以，所以现在它们从右边开始淡入。如果菜单处于展开状态，有没有办法让它们从上方淡入正常位置？此外，每次我单击导航菜单按钮时，菜单项的淡入速度会越来越慢，每次打开和关闭菜单时都会越来越慢。只是检查了更新小提琴，当我反复单击“单击”按钮时，我没有注意到淡入时间的任何变化，因此不确定您的意思。对不起，时间晚了，我明天再查

if ( $('.main-nav').hasClass("active") )

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

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