jquery - jQuery/CSS 转换内容

Question

假设我有两种形式。当用户完成第一个表单时，他们可以单击继续并移至第二个表单。目前我只是使用淡入淡出和淡出来在一页上显示这两种形式。但我想把它改成变换效果。所以假设第二种形式的盒子比第一种形式的盒子大。然后在完成第一个表单并单击提交后，我希望它增长到第二个框的大小，然后显示下一个内容。

我不知道那叫什么，我已经漫无目的地搜索了一段时间，但一切都指向淡入淡出效果，不相关的插件，如旋转等。关于如何为容器实现这种转换效果的任何想法？谢谢

Answer 1

这是我放在一起的一个简单示例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>​

Answer 2

jQuery 函数怎么样slideUp()，slideDown()但为了获得最大的灵活性，请使用animate()并选择要动画的内容。

Answer 3

你已经尝试过动画吗？也许这篇文章可以帮助你。