CSS3通过onClick和Submit按钮对DIV进行动画/翻译

我想看看是否有人能为我指明正确的方向，以实现以下目标：

当用户单击SUBMIT时，包含表单的DIV WRAP将水平滑离页面（即，100%宽度的容器），显示下方的新DIV（确认确认）。当然，所有的东西都是z索引和分层的

有人有CSS3建议吗

一如既往，非常感谢

干杯

埃里克

下面是正在使用的代码：

$('#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>

感谢提交的表格！！

您可以这样做：（）

//HTML
...
谢谢！！：）
//CSS
#容器{
高度：100px；
宽度：200px；
位置：相对；/*设置位置，以便#包裹可以正确定位*/
}
#新的{
宽度：100%；/*可选，包装结束后填充容器*/
高度：100%；/*此处相同*/
}
#包裹{
背景：#FFF；/*设置背景，使您看不到重叠*/
位置：绝对；/*将其定位到相对块*/
宽度：100%；/*使其尽可能大*/
身高：100%；
z索引：10；/*将其置于顶部*/
溢出：隐藏；/*防止水平滑动时出现笨拙的动画*/
}
//JS
$（函数（）{
$（'form'）。提交（函数（）{
$（'#wrap'）。设置动画（{width:0}，400）；//通过添加不透明度添加淡入度：0
返回false；
});
});
​

//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;
  });
});
​