Como posso obter o jQuery load () para concluir antes do Fadeout/Fadein?

Question

Quero fazer uma chamada de Ajax via jQuery load () e somente quando ele retornar, depois desaparece o conteúdo antigo e desaparece o novo conteúdo. Quero que o conteúdo antigo permaneça aparecendo até que o novo conteúdo seja recuperado, momento em que o desbotamento/in é acionado.

Usando:

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

O conteúdo desaparece e sai e em alguns momentos, o número de chamadas mais tarde () e as atualizações de dados, mas o Fade já foi concluído.

Answer 1

Use retornos de chamada para controlar a ordem das chamadas.

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

(Nota: não tenho 100% de certeza sobre se usar var $data = ... e $data.doStuff() realmente funcionará - se isso funcionar, ele evita que você precise procurar a div na árvore Dom toda vez, mas se não acontecer, apenas remova a primeira linha e use $('#data') em toda parte...

Answer 2

O problema está relacionado ao fato de que todas as três funções, Fadeout, Load e Fadein são assíncronas. Cada uma das funções acima aceita um argumento de retorno de chamada (uma função) que será executado quando a função terminar a execução. Por exemplo

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

// Se você definiu 'FunctionTorUnwenfadeoutiscomplete', ele será executado após o término do Fadeout.

Armado com esse conhecimento, agora você pode resolver seu problema.

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

Como alternativa, você pode definir o LoadData, Fadeindata como uma funções anônimas em linha.