Jquery slide up function not activating in contact form script

Question

Everything is working on this contact form except for the last bit using the slide up function to replace the contact form with a thank you message and I just can't seem to hack my way to a solution.

You fill out the form, hit submit, the email gets sent, and the loading gif appears, but the slideup animation never happens and the thank you image never shows.

<!--CONTACT PANEL-->
<div id="contact-panel">

    <div class="top">: : CONTACT ME : :</div>

    <form id="contactform" method="post">
        <ol class="forms">
            <fieldset>
                <label for="name"><input type="text" name="name" id="name" value="" placeholder="Name:" required minlength="2" /></label>
            </fieldset>
                <p style="margin-top: -10px;"><label for="name" class="error"></label></p> 
            <fieldset>
                <label for="email"><input type="text" name="email" id="email" value="" placeholder="Email:" required /></label>
            </fieldset>
                <p style="margin-top: -10px;"><label for="email" class="error"></label></p>           
            <fieldset>
                <label for="message"><textarea name="message" id="message" placeholder="Question/Comments:" required ></textarea></label>
            </fieldset>
                <p style="margin-top: -5px;"><label for="message" class="error"></label></p>            
            <li class="buttons"><button type="submit" id="submitemail">Send Email &raquo;</button><input type="hidden" name="submitted" id="submitted" value="true" /></li>

        </ol>
    </form>

</div>

Here's the JS...

$(document).ready(function () {
    $("#contactform").validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true,
                minlength: 10
            },
        },
        messages: {
            name: {
                required: "*Please enter your name.",
                minlength: "*Your name must consist of at least 2 characters."
            },
                email: "*Please enter a valid email address.",
                message: "*Please, say something at least 10 characters long.",
        },
        submitHandler: function(form) {
            $('#submitemail').hide();
            $("#contactform li.buttons").append('<img src="media/contact/loading.gif" alt="Loading" id="loading" />');      
        $.post('code/form-contact/submitcontactform.php',
        $('form#contactform').serialize(),
        function(data){
            $("#contactform").slideUp("normal", function() {                                                
            $("#contactform").before('<img src="media/contact/contact_thankyou.png" alt="Thank You" id="thankyou" />');     
            });         
        });         
        },      
    })      
    return false;                          
});

I have tried a lot of different ways but I just don't know enough beyond guessing and trial and error. Any help would be welcomed.

Answer 1

I did some changes in messages json as below:

    messages: {
        name: {
            required: "*Please enter your name.",
            minlength: "*Your name must consist of at least 2 characters."
        },
        email: 
        {
            email: "*Please enter a valid email address.",
            required: "Please enter email address."
        },
        message: 
        {
            minlength: "*Please, say something at least 10 characters long.",
            required: "Please enter message"
        }
    },

to make it work in fiddle, I had to remove post call as jsfiddle doesn't support it:

http://jsfiddle.net/shifatullah/v3dTz/16/