Neat content transitions like in HTML5 bing

Question

I saw recently a nice effect being previewed in Bing for IE9 and also for Safari 5. When you press enter on the search box, the search box moves nicely up towards the top of the page and the results fold up from the bottom. You can see it in action here... http://www.youtube.com/watch?v=NYuLALX6aeI#at=69

My question is, how is this done and how can I do this? I hope you can understand my question.

Answer 1

Basic idea:

JQuery:

$('#go').click(function() {
    $('#form').animate({
        'height': '80px',
        'text-indent': '50px',
        'padding-top':'20px'
    }, {
        queue: false,
        duration: 1500,
        complete:function(){
            $('html,body').css('overflow-y','visible');
        }
    });
    $('#results').show({
        type: 'slide',
        direction: 'up'
    }, {
        queue: false,
        duration: 1500
    });
});

CSS:

#form {
    background-color:blue;
    text-indent:300px;
    width:100%;
    height:100%;
    padding-top:200px;
}

#results {
    background-color:yellow;
    display:none;
    height:700px;
}
body, html {
    width:100%;
    height:100%;
    overflow:hidden;
}

HTML:

<div id="form">
    <input type="text" /> 
    <input type="button" id="go" value="go" />
</div>
<div id="results">Search results</div>

Demo: http://jsfiddle.net/AlienWebguy/hwAtU/