Timing Ajax Calls with Jquery Animations

Question

I'm using the following script to load posts for each user's page.

$.post("postupdate.php", function(data){
var postoutput = $("#postoutput", data);
$("#postcontainer").load("postupdate.php?user=<? echo $profileuser_id; ?> #postoutput");
$( '#postcontainer' ).fadeIn();
}, "html"); 

Everything works fine except the fadeIn function. My load times vary, so sometimes the postcontainer div will fade in before it has been filled with posts from the Ajax Call. How can I control when the fadeIn function goes off so I can make sure it always finishes loading the content before showing the div? It looks really bad right now when they just appear out of thin digital air sometimes.

-Thanks

Answer 1

Use a callback for .load() and do the fade in there.

$("#postcontainer").load("postupdate.php?user=<? echo $profileuser_id; ?> #postoutput", function(){
    $( '#postcontainer' ).fadeIn();
});

Answer 2

From the documentation:

$("#postcontainer").load("postupdate.php?user=<? echo $profileuser_id; ?> #postoutput", function() {
    $('#postcontainer').fadeIn();
});

.load() has a callback function, either after the data to be sent, or the url. This function executes when the loading is complete.