我最近看到在 Bing 中为 IE9 和 Safari 5 预览了一个很好的效果。当你在搜索框上按回车键时,搜索框会很好地向上移动到页面顶部,结果从底部向上折叠.您可以在这里看到它的实际效果... http://www.youtube.com/watch?v=NYuLALX6aeI#at=69
我的问题是,这是如何完成的,我该如何做?我希望你能理解我的问题。
最佳答案
基本思路:
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>
关于javascript - 整洁的内容转换,如 HTML5 bing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7044002/