Как заставить jQuery ждать завершения эффекта?

Я уверен, что я читал об этом на днях, но, похоже, я ничего не могу найти. У меня есть событие fadeOut(), после которого я удаляю элемент, но jQuery удаляет элемент, прежде чем он сможет закончить затухание.
Как мне заставить jQuery ждать, пока элемент не исчезнет, а затем удалите его?

Ответ 1

Вы можете указать функцию обратного вызова:

$(selector).fadeOut('slow', function() {
    // will be called when the element finishes fading out
    // if selector matches multiple elements it will be called once for each
});

Документация здесь.

Ответ 2

С версией jQuery 1.6 вы можете использовать метод .promise().

$(selector).fadeOut('slow');
$(selector).promise().done(function(){
    // will be called when all the animations on the queue finish
});

Ответ 3

Вы также можете использовать $.when() для ожидания завершения promise:

var myEvent = function() {
    $( selector ).fadeOut( 'fast' );
};
$.when( myEvent() ).done( function() {
    console.log( 'Task finished.' );
} );

Если вы делаете запрос, который также может потерпеть неудачу, вы можете пойти еще дальше:

$.when( myEvent() )
    .done( function( d ) {
        console.log( d, 'Task done.' );
    } )
    .fail( function( err ) {
        console.log( err, 'Task failed.' );
    } )
    // Runs always
    .then( function( data, textStatus, jqXHR ) {
        console.log( jqXHR.status, textStatus, 'Status 200/"OK"?' );
    } );

Ответ 4

если вы хотите переключиться, угаснуть и угаснуть другого в одном и том же месте, вы можете поместить атрибут {position: absolute} в divs, чтобы обе анимации играли друг над другом, а вы не вам нужно ждать, пока одна анимация закончится, прежде чем запускать следующий.