Как я могу загрузить jQuery load() до fadeOut/fadeIn?

Question

Я хочу сделать вызов AJAX через jQuery load() и только после его возвращения, затем fadeOut старого контента и fadeIn нового контента. Я хочу, чтобы старый контент оставался пока до тех пор, пока не будет получен новый контент, и в этот момент вызывается Fade Out/In.

Использование:

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

содержания выцветает и снаружи, и несколько мгновений спустя нагрузки() возвращает вызов и обновление данных, но увядает уже завершены.

Answer 1

Используйте обратные вызовы для управления порядком вызовов.

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, нагрузка и FadeIn являются асинхронными. Каждый из abov e принимает аргумент обратного вызова (функция), который будет запускаться, когда функция завершит выполнение. Например.

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

// Если вы определили 'functionToRunWhenFadeOutIsComplete' он будет работать после того, как FADEOUT закончится.

Вооруженный этими знаниями, вы можете решить вашу проблему.

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

В качестве альтернативы, вы можете определить LoadData, fadeInData в качестве встроенных анонимных функций.