我想看看是否有人可以指引我朝着正确的方向实现以下目标:
当用户点击SUBMIT时,包含表格的DIV WRAP将水平滑动页面(即100%宽度容器),显示下面的新DIV(确认确认)。当然,所有内容都是z-index'd和分层。
有CSS3建议的人吗?
非常感谢。
干杯,
埃里克
答案 0 :(得分:1)
您可以这样做:(demo)
//HTML
<div id="container">
<div id="wrap">
<form id="myform">
...
</form>
</div>
<div id="new">
Thanking you!! :)
</div>
</div>
//CSS
#container {
height:100px;
width:200px;
position:relative; /* set position so #wrap can position correctly */
}
#new {
width:100%; /* optional, fills up the container once the #wrap has gone */
height:100%; /* same here */
}
#wrap {
background:#FFF; /* set background so you dont see the overlapping */
position:absolute; /* position it to the relative block */
width:100%; /* make it just as big */
height:100%;
z-index:10; /* set it on top */
overflow:hidden; /* prevent awkward animation when sliding horizontal */
}
// JS
$(function(){
$('form').submit(function(){
$('#wrap').animate({width:0},400); // add fading by adding opacity:0
return false;
});
});
答案 1 :(得分:0)
I have created this demo for you using jQuery :)
以下是使用的代码:
$('#myform :submit').click(function(){
// your code - use ajax to submit the form
$(this).parent('#frm').slideUp('slow', function(){
$('#success').slideDown('slow');
});
return false;
});
示例html代码:
<form id="myform">
<div id="frm">
<input type="text" /><br />
<textarea cols="50" rows="10"></textarea><br />
<input type="submit">
</div>
</form>
<div id="success">Thanks form submitted !!</div>