动画功能不适用于 DIV

Question

我试图让一个 div 从屏幕 off 移动到 on 屏幕... div 应该从上到下。我尝试了一些东西，但不幸的是什么也没发生 :(。我的 div 必须是 position: absolute; 对吗？

请帮忙。

HTML + JQUERY

<div id="nav">
    <a href="#"><span>1</a>
    <a href="#"><span>2</a>
    <a href="#"><span>3</a>
    <a href="#"><span>4</a>     
    <a href="#"><span>5</a>
</div>

<div id="hidden">
    <h1>Text</h1>
    <p>Text</p>
</div>

<script>
    var main = function() {

        $('#nav a:nth-child(1)').click(function() {
            $('#hidden').animate({
                top: +=500px
            }, 1000);
        });
    };
    $(document).ready(main);
</script>

CSS

    body {
    background-image: url("http://static.tumblr.com/97f4b171db68d6ef1836c8fcb9a1c1a3/oi8jcug/xIcn5vql3/tumblr_static_aajc47nn2ds8c0k004gskoo0c.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px;
    margin: 0px;
}

a {
    outline: none;
}

#nav {
    height: 50px;
    line-height: 50px;
    background-color: #1C1C1C;
    font-size: 0px;
    text-decoration: none;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    margin-bottom: none;
}

#nav span {
    display: inline-block;
    font-size: 25px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    border-right: 1px solid white;
    height: 50px;
}

#nav span:first-child {
    border-left: 1px solid white;
}

#nav span:hover {
    border-bottom: 2px solid white;
}

#nav a {
    color: white;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}

#hidden {
    width: 100%;
    height: 200px;
    padding-left: 30px;
    background-color: #1C1C1C;
    color: red;
    font-size: 10px;
    top: -250px;
    position: absolute;
}

谢谢你， 九头蛇

Answer 1

改变

    $('#nav a:nth-child(1)').click(function() {
        $('#hidden').animate({
            top: +=500px
        }, 1000);
    });

与

$('#nav a:nth-child(1)').click(function() {
    $('#hidden').animate({
        top: '+=500px'
    }, 1000);
});