javascript - div を上にスライドさせてから、新しい div を追加してその場所に上にスライドさせます

Question

ユーザーが登録フォームに正常に入力したときに、2 つの div ボックスをアニメーション化しようとしています。アニメーション化された最初の div は登録フォーム自体で、ユーザーがフォームに適切に入力すると、下から中央にスライドして上にスライドし、画面から消えます。

最初の部分は正常に機能していますが、次に、画面の下部から中央にスライドする 2 番目の div が必要です。この div には、作成したばかりのアカウントを有効にするためにメールを確認するようにユーザーに指示するメッセージが含まれています。このビットを機能させてアニメーション化するにはどうすればよいですか?

使用しているコードは次のとおりです。

 $("#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('<div id="reg_success">Please check your emails to active your account</div>');

                //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);



                }
            });
        }
    });