slinky!

by ryantroyford

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:525px;
    }

    #city{
       margin-top:150px;
    }
    
    #sizeBox{
        width:300px;
        height:50px;
        margin:0px auto 0px auto;
        background-color:#bada55;
    }

JavaScript

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