How can I get jQuery load() to complete before fadeOut/fadeIn?

Question

I want to do an AJAX call via jQuery load() and only once it returns, then fadeOut the old content and fadeIn the new content. I want to old content to remain showing until the new content is retrieved, at which point the fade Out/In is triggered.

Using:

$('#data').fadeOut('slow').load('/url/').fadeIn('slow');

the content fades in and out and a few moments the later the load() call returns, and the data updates, but the fade has already completed.

Answer 1

Use callbacks to the control the order of the calls.

var $data = $('#data');
$data.fadeOut('slow', function() { 
    $data.load('/url/', function() { 
        $data.fadeIn('slow'); 
    }); 
});

(Note: I'm not 100% sure about if using var $data = ... and $data.doStuff() will actually work - if it does, it saves you from having to look up the div in the DOM tree every time, but if it doesn't, just remove the first line and use $('#data') everywhere...