Chuyển đổi nội dung gọn gàng như trong HTML5 bing

Question

Tôi thấy gần đây một hiệu ứng đẹp đang được xem trước trong Bing dành 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 độc đáo lên đầu trang và kết quả gấp lại từ phía dưới. Bạn có thể thấy nó hoạt động ở đây ... http://www.youtube.com/watch?v=NYuLALX6aeI#at=69

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

Answer 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/

Answer 2

Tất cả đều đang sử dụng hình ảnh động CSS3. Tôi đã đánh dấu một hộp tìm kiếm rất đơn giản với hoạt ảnh here 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 cho việc định vị và hình ảnh động không phải là một mã ngữ nghĩa. Hoạt ảnh CSS nhanh hơn và mượt mà hơn.