jquery fadeout, load, fadein

Question

I am using JQuery and what I want to happen is.

Div fades out using the fadeOut command. It then loads content from a url using the load command. Then once content loaded it fades back in using the fadeIn command.

The code I have is:

$("#myDiv").fadeOut().load('www.someurl.com').fadeIn()

However this does not work. It kind of flashes then loads out then loads in. I think the problem is that the fading is happening before the load is complete.

What should I do

Thanks

Answer 1

you can use the load() callback function like this:

$("#myDiv").fadeOut().load("www.someurl.com", function(response, status, xhr) {
    $(this).fadeIn();
});

you might want to use the status of the load() call to see if everything was completed properly.

$("#myDiv").fadeOut().load("www.someurl.com", function(response, status, xhr) {
    if (status == "error") {
        // handle error
    }
    else
    {
        $(this).fadeIn();
    }
});