Slide up div and then append a new div to slide up in its place
<p>Im trying to animate two div boxes when a user has successfully filled out a registration form. The first div that is animated is the registration form itself which will slide up from the bottom into the centre and the slide up and off the screen when a user has filled the form properly. </p>

<p>I have that first bit working fine but I then need a second div to slide up from the bottom of the screen into the center that contains a message telling a user to check their emails to activate the account they just made. How can I get this bit working and animating?</p>

<p>The code im using is this:</p>

<pre><code> $("#registerForm").validate({
            rules: {
            name: { required: true, minlength: 3 },
            eMail:{ required: true},
            passWord: { required: true, minlength: 5 },
            rePassWord: { equalTo: ".passWord" }
            },
            submitHandler: function(form) 
            {

            // do other stuff for a valid form
            $.post('../inc/register.php', $("#registerForm").serialize(), function(data) {

            if(data == "true")
                {
                $('#loaderWrap').remove();
                $('#reg_dialog').animate({
                marginTop : -2000,
                opacity   : 0
                }, 400);

            $.append('&lt;div id="reg_success"&gt;Please check your emails to active your account&lt;/div&gt;');

                //Slide Up Success Message 
                $('#reg_success').css({
                top     : winH / 2 - $this.height() / 2,
                left    : winW / 2 - $this.width() / 2,
                display : 'block'
                }).animate({
                marginTop : 0,
                opacity   : 1
                }, 400);



                }
            });
        }
    });
</code></pre>
