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

Question

I want to make an AJAX call through jQuery load () and only after it returns, then fadeOut the old content and fadeIn the new content. I want the old content to remain displayed until the new content is received, after which Fade Out / In is called.

Using:

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

the content disappears and disappears, and a few moments later, the load () call returns, as well as the data update, but the disappearance is already completed.

Answer 1

Use callbacks to control the order of calls.

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

(. 100%, var $data = ... $data.doStuff() - , div DOM , , $('#data') ...

Answer 2

, fadeOut, load fadeIn . (), , . .

$('#data').fadeOut(functionToRunWhenFadeOutIsComplete);

// functionToRunWhenFadeOutIsComplete, fadeOut.

, .

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

loadData, fadeInData .