Question

Im using jquery to load in 2 external pages, one called search.php and the other is called info.php. I am displaying them each on a single page called user.php but only when there link has been clicked in the navigation bar. Unfortunately I am currently experiencing a problem, when I use this section of script:

$(document).ready(function() {
$('#content_area').load($('.menu_top:first').attr('href'));
});


$('.menu_top').click(function() {
var href = $(this).attr('href');
$('#content_area').hide().load(href).fadeIn('normal');

return false;
});

My page seems to flicker and stall for 2 seconds before changing the content. I have noticed However if I remove the .hide and fadeIn it seems to work fine. How can I still use the fade-in but eliminate the stall and flickering?

Answer 1

jQuery adds .fadeIn, .hide, and other effects to it’s effect’s queue. So it’s calling .load() instantly JUST AFTER it sends the .hide to the effect’s queue/and the .hide isn’t completed.

You can do a callback on the .hide method:

$('#content_area').hide(function(){
    $('#content_area').load(href).fadeIn('normal');
})

This allows hide to finish first.