Question

I was just wondering how I can animate the jQuery form ui’s div update on form submission instead of it plainly appearing.

This is the work I have done so far on my multi-stage form:

http://licf.ronaldboadi.com/practice/test.html

Answer 1

You could use a loading gif while you are processing data and once you have your div ready use a fade in animation.

//Assuming you have a $.ajax request to submit the form:

//add the loading gif
$('#submitform').html('<img src="loading.gif" />');

//send your form data
$.ajax({
    url: "process.php",
    data: {
        param1: 1,
        param2: 2,
        param3: 3
    },
    success: function(data){
        //hide the div, assuming the process.php return simple html code to your page update the div content, then add the fade in animation
        $('#submitform').hide().html(data).fadeIn('slow');
    }
});