CSS3 Animate/Translate DIV via onClick with Submit Button - css

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

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

Answer 2

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>