CODEWITHSUNDEEP
phpjavascriptjquery
Andrew Walker
Andrew Walker

Reputation: 492

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

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?

Upvotes: 1

Views: 206

Answers (2)

Austin
Austin

Reputation: 6034

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.

Upvotes: 2

Tom Walters
Tom Walters

Reputation: 15616

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

});

Upvotes: 1

Related Questions