jquery在将新页面加载到带动画的div中时出现问题

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) 
        });
    });

});