Как я могу получить load () JQuery до fadeOut / fadeIn?

Question

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

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

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

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

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, 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 как встроенные анонимные функции.