JQuery/CSS轉換內容

假設我有兩種形式。當用戶完成第一個表格時，他們可以點擊繼續並移至第二個表格。目前我只是使用淡入淡出來在一個頁面上顯示兩個表單。但我想將其改變爲變形效果。所以我們假設第二種形式的框比第一種形式的框大。然後，在完成第一個表單並單擊提交後，我希望它變成第二個框的大小，然後顯示下一個內容。

我不知道這是叫什麼，我一直在漫無目的地搜索一段時間，但一切都指向淡出效果，旋轉等無關插件等。關於如何實現這種轉換效果的任何想法容器？謝謝JQuery/CSS轉換內容

來源

2012-09-21 John Bernal

下面是一個簡單的例子，我放在一起http://jsfiddle.net/ums8a/

var form1height = $('#form1').height(); 
var form2height = $('#form2').height(); 
$('#form2').hide(); 

$("a").click(function(event) { 
    event.preventDefault(); 
    $('#wrapper').animate({ height: form2height }, 750); 
    $('#form1').fadeOut('slow', function() { 
     $('#form2').fadeIn('slow'); 
    }); 
});

和HTML

<div id="wrapper"> 
    <div id="form1"> 
     <form name="form1" action="" method="post"> 
      <p><input name="i1" /></p> 
      <p><input name="i2" /></p> 
      <p><input name="i3" /></p> 
      <p><input name="i4" /></p> 
     </form> 
    </div> 
    <div id="form2"> 
     <form name="form2" action="" method="post"> 
      <p><input name="i5" /></p> 
      <p><input name="i6" /></p> 
      <p><input name="i7" /></p> 
      <p><input name="i8" /></p> 
      <p><input name="i5" /></p> 
      <p><input name="i6" /></p> 
      <p><input name="i7" /></p> 
      <p><input name="i8" /></p> 
     </form> 
    </div> 
</div> 
<a href="#">Click Here</a>

來源

2012-09-21 21:06:20 user1289347

怎麼樣jQuery功能slideUp()和slideDown()但最靈活使用animate()並選擇動畫。

來源

2012-09-21 20:48:03 jtheman

你已經嘗試約animatin？也許這post可以幫助你。

來源

2012-09-22 04:04:19 surya

JQuery/CSS轉換內容

回答

相關問題