CODEWITHSUNDEEP
jqueryajax
centree
centree

Reputation: 2439

Timing Ajax Calls with Jquery Animations

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

Upvotes: 0

Views: 35

Answers (2)

Daedalus
Daedalus

Reputation: 7722

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.

Upvotes: 1

Musa
Musa

Reputation: 97672

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

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

Upvotes: 2

Related Questions