jQuery load function with fading effects not working as expected

Question

I have the following scenario

jQuery('#content').fadeOut('slow',function(){
    jQuery('#content').load("detail.php?product="+imgID+"&category="+cat);
    jQuery('#content').fadeIn('fast');
});

My problem however is that all the effects happen and when the effects are done, then only the contents of the PHP file loads into content, is there a better way so that the content is not slow in loading

Answer 1

Try using the callback function of the load function. Like so:

jQuery("#content").load("detail.php?product="+imgID+"&category="+cat, function()
{
    jQuery("#content").fadeIn("fast");
});

This way; your animation won't start until the content has been loaded.