12

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

John
  • 18,327
  • 36
  • 105
  • 149

4 Answers4

11

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
  • 58,834
  • 17
  • 108
  • 112
  • 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 Apr 30 '10 at 15:11
9
$("#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
  • 593
  • 5
  • 15
5

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

$("#myDiv").fadeOut().load('www.someurl.com', function() {
  $(this).fadeIn();
});
Nick Craver
  • 594,859
  • 130
  • 1,270
  • 1,139
1

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

Ty W
  • 6,406
  • 4
  • 26
  • 34