CSS3 Animer/Traduire DIV via onClick avec Bouton Envoyer

Question

Je voudrais voir si quelqu'un peut me diriger dans la bonne direction pour atteindre le suivi:

Lorsque l'utilisateur clique sur SOUMETTRE sur le WRAP DIV contenant la forme glissera off horizontalement la page (c.-à-d., le conteneur de 100% de largeur) montrant une NOUVELLE DIV en dessous (confirmation de confirmation). Bien sûr, tout est z-indexé et superposé.

Toute personne ayant des suggestions CSS3?

Merci beaucoup, comme toujours.

Cheers,

Erik

Answer 1

I have created this demo for you using jQuery :)

Voici le code utilisé:

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

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

    return false; 

}); 

Et un exemple de code 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> 

Answer 2

Y Vous pouvez faire quelque chose comme ceci: (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; 
    }); 
}); 
​