CSS3動畫/翻譯DIV與提交按鈕

Question

我想看看是否有人能告訴我在正確的方向，實現如下：

當用戶點擊提交包含表單將滑動DIV WRAP水平關閉顯示下方的NEW DIV的頁面（即100％寬度的容器）（確認確認）。當然，一切都是z-index'd和分層。

任何有CSS3建議的人？

非常感謝一如既往。

乾杯，

埃裏克

Answer 1

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> 

Answer 2

ÿ ou可以這樣做：（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; 
    }); 
}); 
​