提交表格，通过ajax回复

Currently I have this, which works nicely - it's an email signup list which returns a successful response or error, as appropriate.

$.ajax({  
    type: "POST",  
    url: "mailing_list/mailing_list_add2.php",  
    data: dataString,  
    success: function(response) { 
        $('#emailform').html("<div id='display_block'></div>");
        $('#display_block')                      
        .hide()  
        .fadeIn(500, function() {  
            $('#display_block').html(response)
        });             
}  
}); 
return false; 
});

The form is in a div with ID "emailform" and the "display_block" is the response. What I need is for the response to automatically disappear after a short time and for the form to fade back in. I've tried a few things but nothing that has worked yet.

Any help on what to add to the above code would be appreciated.

Assuming your initial html is like,

<div id="emailform">
   <form>
   ...
   </form>
</div>

you can proceed like this,

.ajax({       
type: "POST",       
url: "mailing_list/mailing_list_add2.php",       
data: dataString,       
success: function(response) {  

    var backupHtml = $('#emailform').html();        
    $('#emailform').html("<div id='display_block'></div>");            

    $('#display_block')                               
    .hide()       
    .html(response)    
    .fadeIn(500, function() {               
        $(this).fadeOut(5000,function(){
            $('#emailform').html(backupHtml);
        }); 
    });

}   
});  

There is nothing inside display_block when you fade it in. Its just empty, I changed the code:

$.ajax({  
    type: "POST",  
    url: "mailing_list/mailing_list_add2.php",  
    data: dataString,  
    success: function(response) { 

        var backedup = $('#emailform').html(); // Take a snapshot of whats inside the emailform
        $('#emailform').html("<div id='display_block'></div>");
        $('#display_block')                      
        .hide()
        .html(response) // New line!
        .fadeIn(500,function (){ // After we finsish the fadeIn 
            $('#emailform').hide().html(backedup).fadeIn(500); // Reset the old content and fade it in
        });​           
}  
}); 
return false; 
});

I created a JSFiddle for you http://jsfiddle.net/XHkWr/1/

To do instead of all mumbo jumbo.

$('#emailform').html("<div id='display_block'></div>");
$('#display_block').hide().html(response).stop().fadeIn(500);   

I would say, that this would be a correct solution:

$.ajax({
        url: 'mailing_list/mailing_list_add2.php',
        type: 'post',
        data: dataString,
        success: function(data, textStatus, jqXHR) {
            var $emailForm = $('#emailform').html();
            $('#emailform').html('<div id="display_block"></div>');

            $('#emailform').hide().html(data).fadeIn(500).delay(3000).fadeOut(500, function() {
                $('#emailform').html($emailForm);
            });
            return false;
        },
        error: function(jqXHR, textStatus, errorThrown) {
            var $emailForm = $('#emailform').html();
            $('#emailform').html('<div id="display_block"></div>');

            $('#display_block').hide().html(textStatus).fadeIn(500).delay(3000).fadeOut(500, function() {
                $('#emailform').html($emailForm);
            });
            return false;
        }
    });

Result here: http://jsfiddle.net/p9URt/2/