CSS3 Animate/Translate DIV via onClick with Submit Button

Question

I would like to see if anyone can direct me in the right direction to achieve the follow:

When the user clicks on SUBMIT the DIV WRAP containing the form will slide off horizontally the page (ie, the 100% width container) showing a NEW DIV underneath (acknowledging confirmation). Of course everything is z-index'd and layered.

Anyone with CSS3 suggestions?

Many thanks as always.

Cheers,

Erik

Answer 1

I have created this demo for you using jQuery :)

Here is the code being used:

$('#myform :submit').click(function(){
   // your code - use ajax to submit the form

  $(this).parent('#frm').slideUp('slow', function(){
    $('#success').slideDown('slow');
  });

  return false;

});

And sample html code:

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

Answer 2

You could do something like this: (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;
  });
});
​