CSS3通过onClick和提交按钮动画/翻译DIV

时间:2010-07-29 06:49:20

标签: css forms

我想看看是否有人可以指引我朝着正确的方向实现以下目标:

当用户点击SUBMIT时,包含表格的DIV WRAP将水平滑动页面(即100%宽度容器),显示下面的新DIV(确认确认)。当然,所有内容都是z-index'd和分层。

有CSS3建议的人吗?

非常感谢。

干杯,

埃里克

2 个答案:

答案 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>