JQuery - Ожидание завершения fadeOut перед запуском fadeIn

Мне было интересно, есть ли какой-нибудь способ подождать, пока fadeOut не будет завершен до того, как начнется fadeIn, так как, когда я запускаю следующий код, он помещает один div под другой, а затем, когда он исчезает, он перемещается вверх... выглядит немного уродливо.

Код выглядит следующим образом:

$('.sidebarform').fadeOut('slow');
$('.sidebarsuccess').fadeIn('slow');

Ответ 1

Функция fadeOut имеет обратный вызов, который выполняется при выполнении анимации:

$('.sidebarform').fadeOut('slow', function() {
    $('.sidebarsuccess').fadeIn('slow');
});

Ответ 2

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

$('.sidebarform').fadeOut('slow').promise().done(function() {
    $('.sidebarsuccess').fadeIn('slow');
});

Ответ 3

Я использую jQuery Queues - позволяет вам помещать что угодно в стек fx (и отмена также работает с ним, нет необходимости .promise()):

$('.sidebarform').fadeOut('slow').queue(function(done) {
    $('.sidebarsuccess').fadeIn('slow');
    done();
}) .... other chained effects

если дальнейшие эффекты не используются, done() можно удалить. .queue() будет удерживать стек до тех пор, пока не будет .queue() done() - полезно для асинхронного выполнения. Это не будет ждать исчезновения.

Это заставит стек fx ожидать fadeIn (также как дополнительный пример):

$('.sidebarform').fadeOut('slow').queue(function(done) {
    $('.sidebarsuccess').fadeIn('slow', done);
}) .... other chained effects kicking in after fadeIn

Очередь будет продолжаться только после завершения fadeIn и выполнения вызовов в качестве обратного вызова, который является очередью. Стек видит это как одну запись.