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

Answer 2

$("#myDiv").fadeOut(1000, function () {
    $("#myDiv").load("www.someurl.com", {limit: 25}, function(){
        $("#myDiv").fadeIn();
    });
});

The limit specifies how long time to wait for an answer in the load call

Answer 3

Use the success callback for .load(), like this:

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

Answer 4

you need to do the fading in the load callback function due to the asynchronous nature of AJAX.