javascript - Peralihan kandungan kemas seperti dalam HTML5 bing

Saya baru-baru ini melihat kesan yang menarik dipratonton di Bing untuk IE9 dan juga untuk Safari 5. Apabila anda menekan enter pada kotak carian, kotak carian bergerak ke atas dengan kemas ke bahagian atas halaman dan hasilnya dilipat dari bawah. Anda boleh melihat ia beraksi di sini... http://www.youtube.com/watch?v=NYuLALX6aeI#at=69

Soalan saya ialah, bagaimana ini dilakukan dan bagaimana saya boleh melakukannya? Saya harap anda dapat memahami soalan saya.

Jawapan #1

Idea asas:

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/

Jawapan #2

Mereka semua menggunakan animasi CSS3. Saya telah mencuba sebuah kotak carian yang sangat sederhana dengan animasi di sini Sila gunakan Chrome atau Safari. Cuma taip sesuatu dan tekan enter.

CSS

body{text-align:center; padding: 200px 0;-webkit-transition: all 0.4s linear;}
#search{-webkit-transition: all 0.2s linear;}
#search:focus{-webkit-transform:scale(1.4);}

HTML

 <input type="search" placeholder="Search..." id="search"/>

JS :

document.getElementById('search').addEventListener('keydown', function(e){
    if(e.keyCode == 13){document.body.style.padding = "40px";}
}, false);

Menggunakan Javascript untuk penentuan posisi dan animasi bukanlah kod semantik. Animasi CSS jauh lebih pantas dan lancar.