jquery issue in loading a new page into a div with animation

Question

I am looking to have a div, which holds a php page to fade out, unload, and then fade in a new page on every menu:

        $('#home').click(function() {
        $('#page_container').fadeOut(500).unload();
        $('#page_container').load('php/home.php').fadeIn(550);
    });

For some reason, it flickers the new page, before it fades out in the first instance, fades out and reloads.

Could someone please help me with this. I am sure it's simple, but I cannot seem to find the right syntax to get it to work?

Answer 1

You should set the load() call to occur in the callback of the fade function:

$("#home").on("click", function () {
    $('#page_container').fadeOut('fast', function() {
        $(this).unload();
        $(this).load('php/home.php');
    });
})

This will fire load() once the fade is completed.

fadeOut() is asynchronous, and so the next line is executed immediately after it is called. Your problem is caused because load() is loading content into your div immediately as it starts to fade out.

Answer 2

Without a demo it's hard to fully understand, but have you looked at using callbacks?

$('#home').click(function() {
    $('#page_container').fadeOut(500, function(){ 
        $(this).unload(); 
        $('#page_container').load('php/home.php', function(){ 
            $(this).fadeIn(550) 
        });
    });

});