jquery - JQuery/CSS変換コンテンツ

Question

私には2つの形式があるとしましょう。ユーザーが最初のフォームを終了したら、[続行]をクリックして2番目のフォームに移動できます。現在、フェードインとフェードアウトを使用して、2つのフォームを1ページに表示しています。しかし、私はそれを変換効果に変更したいと思います。したがって、2番目のフォームのボックスが1番目のフォームのボックスよりも大きいとしましょう。次に、最初のフォームを完成させて[送信]をクリックした後、2番目のボックスのサイズに拡大して、次のコンテンツを表示します。

それが何と呼ばれるのかわからず、しばらくの間目的もなく検索してきましたが、すべてがフェード効果、回転などの無関係なプラグインなどを指しています。コンテナのこの変換効果を実現する方法について何かアイデアはありますか？ありがとう

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

あなたはすでにアニマチンについて試していますか？多分この投稿はあなたを助けることができます。