javascript - Chuyển tiếp nội dung gọn gàng như trong HTML5 bing

Gần đây tôi đã thấy một hiệu ứng đẹp được xem trước trên Bing cho IE9 và cũng cho Safari 5. Khi bạn nhấn enter trên hộp tìm kiếm, hộp tìm kiếm sẽ di chuyển lên phía trên của trang một cách mượt mà và các kết quả sẽ bung ra từ phía dưới. Bạn có thể xem nó hoạt động ở đây... http://www.youtube.com/watch?v=NYuLALX6aeI#at=69

Câu hỏi của tôi là, việc này được thực hiện như thế nào và tôi có thể làm điều này ra sao? Tôi hy vọng bạn có thể hiểu câu hỏi của tôi.

Câu trả lời #1

Ý tưởng cơ bản:

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/

Câu trả lời #2

Tất cả họ đều sử dụng hoạt ảnh CSS3. Tôi đã thử nghiệm một hộp tìm kiếm rất đơn giản với hoạt ảnh ở đây. Vui lòng sử dụng Chrome hoặc Safari. Chỉ cần gõ một cái gì đó và nhấn 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);

Sử dụng Javascript để định vị và tạo hoạt ảnh không phải là mã ngữ nghĩa. Hoạt ảnh CSS nhanh hơn và mượt mà hơn nhiều.