views:

304

answers:

4

Hi, 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

+1  A: 

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();
    }
});
hunter
Is this because the "load" is async and the other actions will continue to work? Your answer will wait to call "fadeIn" after load reports it is done, correct?
MrChrister
yes, once the load has finished it will call fadeIn()
hunter
+1  A: 

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

$("#myDiv").fadeOut().load('www.someurl.com', function() {
  $(this).fadeIn();
});
Nick Craver
+1  A: 

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

Ty W
A: 
$("#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

jweber