Question

Let’s say I have two forms. When the user finishes with the first form, they can click continue and move onto the second form. Currently I’m just using fadein and fadeout to display the two forms on one page. But I want to change it to a transform effect. So let’s say the box for the 2nd form is larger than the box for the 1st form. Then after finished with the first form and clicking submit, i want it to grow into the size of the 2nd box and then display the next content.

I don’t know what that is called and I’ve been searching aimlessly for a while now but everything is pointing to fade effects, non-relevant plugins like rotate, etc. Any ideas on how I can achieve this transforming effect for containers? Thanks

Answer 1

Here is a simple example I put together 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');
    });
});​

and the 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>​