单击时为绝对定位的 Divbox 设置动画

Question

我尝试在点击时为绝对定位的 Div 设置动画。标签是带有#menu 和 HTML5 标签导航的 div。导航有点像#menu 框的包装。一切都是绝对位置。

这是 CSS 代码：

nav  { 
    top:50%; 
    left:50%; 
    position: absolute; 
    margin-top:-31.5px; 
    margin-left:-150px; 
    height: 63px; 
    width: 300px; 
    border: 1px solid '#f2f2f2; 
    background: '#333333; top: 400px 
}

menu1 { 
    height: 63px; 
    width: 75px; 
    float: left; 
    background-image: url(../img/1.png); 
}

jQuery 是：

$('#menu1').click(function() {
    $('nav').animate({
        top: '+=50px',
    }, 
    5000, 
    function() {

    });
});

但它不起作用。单击“#menu1”后，导航应该向上滑动到包装器顶部。那可能吗？ 问候

Answer 1

您的 menu1 缺少 CSS 中的哈希，因为它是带有 id="menu1" 而不是 <menu1> 的元素：

#menu1 { 
    height: 63px; 
    width: 75px; 
    float: left; 
    background-image: url(../img/1.png); 
}

Answer 2

不知道是漏了还是没了，都错了

如果是 id 应该有 # 或者如果是 class 它应该有点 "."

您的 jquery 中也缺少 #。

change this $('nav') to $('#nav')

 $('#nav').animate({
        top: '+=50px',
    }, 
    5000, 
    function() {

    });



  #nav  { 
        top:50%; 
        left:50%; 
        position: absolute; 
        margin-top:-31.5px; 
        margin-left:-150px; 
        height: 63px; 
        width: 300px; 
        border: 1px solid '#f2f2f2; 
        background: '#333333; top: 400px 
    }

    #menu1 { 
        height: 63px; 
        width: 75px; 
        float: left; 
        background-image: url(../img/1.png); 
    }