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); 
    }

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

2 个答案: