AJAX / JS联系表 - 隐藏img

(Need some help as I'm a newbie to AJAX/JS.)

Currently trying to create a AJAX/JS contact form for a site. The form works and is able to send the email no problem. However, I'm trying to have the following workflow upon the "submit" button being pressed.

1) Contact form slides up

2) Loading.gif is presented

3) Form info is sent in email

4) Loading.gif disappears

5) Success message presented in Loading.gif place

I've got 1-3 and 5 working, but can't get #4 to happen.

Here's the code I've got in my submit_form.js:

if(hasError == false) {
$('#sendEmail').slideUp("fast",function() {
    $(this).after('<img src="loading.gif" alt="Loading" id="loading" />');
});

        $.post("sendmail.php",
            { emailFrom: emailFromVal, subject: subjectVal, message: messageVal },
                function(data){
                    $("#sendEmail").slideUp("normal", function() {                 

                        $("#sendEmail").before('<h1>Success! Your email was sent.</h1>');                                           
                    });
                }
             );
    }
        $(this).hide();
    return false;

Can anyone help a newbie out?

In

function(data){
    $("#sendEmail").slideUp("normal", function() {                 
        $("#sendEmail").before('<h1>Success! Your email was sent.</h1>');
    });
}

callback, what you really need to slideUp is the image and not the form since it's already hidden.

change your

$("#sendEmail").slideUp

with

$("#loading").slideUp

I haven't tested any of it, but I would think if you change

$("#sendEmail").slideUp("normal", function() {                 

      $("#sendEmail").before('<h1>Success! Your email was sent.</h1>');                                           
});

to

$("#sendEmail").slideUp("normal", function() {                 
    $("#loading").hide();
    $("#sendEmail").before('<h1>Success! Your email was sent.</h1>');                                           
});

it should work

For starters we don't this function

$('#sendEmail').slideUp("fast",function() {
    $(this).after('<img id="loading" src="loading.gif" alt="Loading"/>');
});

We could simply do:

$('#sendEmail').slideUp("fast").after('<img id="loading" src="loading.gif" alt="Loading"/>');

On sucession of our $_POST we hide the form and loading image.

$.post("sendmail.php",{ emailFrom: emailFromVal, subject: subjectVal, message: messageVal },
     success:function(){
         $("#sendEmail").slideUp();
         $("#loading").hide();
     }
 });