Javascript jQuery:animatingpositionisn'；t影响DOM

我正在尝试设置CSS的

top

值的动画，以便在用户单击汉堡包按钮时创建一个下拉导航

当我在Chrome inspector中查看时，CSS似乎没有应用到元素，但我在同一元素上尝试了

hide（）

函数，效果很好

HTML：

<div class="top section-reversed">
    <div class="container">
        <div class="row">
            <div class="col-2">
                <span class="icon icon-logo-ctr"></span>
            </div>
            
            <div class="col-2 ml-auto">
                <a id="asdf" href="#" class="icon icon-hamburger"></a>
            </div>
        </div>
    </div>
</div>

<div class="nav-mobile">
    <div class="content">
        <a class="icon icon-close" href="#"></a>
        <div class="cta-consult">
            <h5>000000</h5>
            <span class="telephone">000000</span>
        </div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Prices</a></li>
            <li><a href="#">Furniture</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="social-header social-header-mobile">
            <a href="#"><img src="image/social-whatsapp.png" alt="Placeholder" /></a>
            <a href="#"><img src="image/social-instagram.png" alt="Placeholder" /></a>
            <a href="#"><img src="image/social-facebook.png" alt="Placeholder" /></a>
            <a href="#"><img src="image/social-twitter.png" alt="Placeholder" /></a>
        </div>
    </div>
</div>

CSS:

---

一切似乎都很好你能创建一个代码笔吗？除非你的点击事件从未命中。

asdf

是某个元素上的有效ID吗？它不在您提供的HTML中。@Ourobrus oops，忘了在按钮所在的位置包含代码块！我现在更新了我的HTML，我刚刚意识到我包括了jquery的超薄版本，并用以下内容修复了它-

$(document).ready(function() {
    
    // nav-mobile
    $('#asdf').click(function() {
        
        $('.nav-mobile').animate({
            'top': '+=540'
        },
        5000, function() {
            // Animation complete.
        });
    });
});

.nav-mobile {
    background: #fff;
    color: #000;
    height: 100%;
    left: auto;
    overflow: hidden;
    position: fixed;
    /*top: 65px;*/
    top: -605px;
    width: 100%;
    z-index: 1;
}

.nav-mobile > .content {
    padding: 20px;
}

.nav-mobile .icon-close {
    color: #797979;
    float: right;
    padding: 0;
}

.nav-mobile .cta-consult {
    clear: both;
}

.nav-mobile .cta-consult h5 {
    font-size: 14px;
    margin: 0 0 2px;
    letter-spacing: 0;
}

.nav-mobile .cta-consult .telephone {
    font-size: 30px;
    letter-spacing: .02em;
}

.nav-mobile ul {
    border-top: #d0d0d0 solid 1px;
    display: block;
    list-style: none;
    margin: 30px 0 20px;
    padding: 20px 0 0;
    width: 100%;
}

.nav-mobile a {
    color: #000;
    display: block;
    text-transform: uppercase;
    letter-spacing: .25em;
    padding: 10px 0;
}