my animate height from bottom

working version of the animate from bottom div.

HTML

<body>

    <div id="wrap">
        
        <div id="city">
            <div id="skyline"></div>
            <div id="sizeBox"></div>
        </div>
        
    </div>

</body>

CSS

body{
        font-family:arial;
    }
    
    #wrap{
        margin:0px auto 0px auto;
        width:225px;
    }

    #city{
       margin-top:150px;
    }
    
    #sizeBox{
        width:60px;
        height:150px;
        margin:1px auto 0px auto;
        background-color:#000;
    }

JavaScript

$(document).ready(function(){
        $("#sizeBox").hover(function() {
            $(this).animate({ 
                height:"+=50px",
                marginTop:"-=50px"}, 600);},
        function() {
            $(this).animate({ 
                height:"-=50px",
                marginTop:"+=50px"}, 500);
           });
    });