animate an absolute positioned Divbox on click

I try to animate an absolute positioned Div on click. The Tags are divs with #menu and the HTML5 Tag nav. The nav is kinda the wrapper of the #menu boxes. Everything is position absolute.

This is the CSS Code:

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

The jQuery is:

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

    });
});

But its not working. After a Click on the "#menu1" the nav should slide up to the wrappers top. Is t开发者_开发百科hat possible? Greetings

Your menu1 is missing the hash in the CSS, as it is an element with id="menu1" and not <menu1>:

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

I don't know whether you missed or its not there , both of them are wrong

if it is id is should have # or if it is class it should have dot "."

you are missing # in your jquery too.

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