整洁的内容转换,如HTML5 bing

Question

我最近看到了在Bing for IE9和Safari 5中预览的一个很好的效果.当你在搜索框中按Enter键时,搜索框会很好地向上移动到页面顶部,结果从底部向上折叠.你可以在这里看到它...... http://www.youtube.com/watch?v=NYuLALX6aeI#at=69

我的问题是,这是怎么做的,我该怎么做？我希望你能理解我的问题.

Answer 1

基本理念:

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>

演示: http ://jsfiddle.net/AlienWebguy/hwAtU/