onClick淡入列表项

这就是我想要达到的效果:

1)当移动导航按钮被点击-打开主导航，并添加一个类'active'到主导航，并添加一个类'dark-header'到标题。

2)检查主导航是否有一个"active"类，如果有，则循环遍历主导航中的每个列表项并逐个淡出。(最好从左上角开始，但我还没有弄清楚如何做到这一点)

我的代码在一分钟的工作在一定程度上，但导航项不褪色，所以有一些不太正确。它是这样做的:当移动导航按钮被点击菜单打开时，一个类的"活动"被添加到主导航，也一个类的黑暗标题被添加到标题，但我似乎不能让主导航项目从左上角逐渐淡入，而不是他们只是出现在onClick。

这是我目前为止的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);
            });
        };
});

任何关于我在这个问题上哪里出错的想法或任何帮助都是非常感激的。