JQuery: может ли метод empty() задавать длительность?

Ответ 1

Нет. Измените содержимое, затем очистите его, когда завершение затухания завершено.

$('#object_to_be_emptied').children().fadeOut(500, function() {
    $('#object_to_be_emptied').empty();
});

Этот код, к сожалению, вызывает empty столько раз, сколько есть элементов под #object_to_be_emptied. Если вы используете jQuery > 1.6, вы можете обойти это с помощью поддержки $.Deferred для анимации:

$('#object_to_be_emptied').children().fadeOut(500).promise().then(function() {
    $('#object_to_be_emptied').empty();
});

Ответ 2

В двух других ответах предлагается использовать $('#object_to_be_emptied').children().fadeOut(), но на самом деле это плохая идея использовать .children(), потому что это приведет к тому, что анимация будет применена к каждому из дочерних элементов в вашем содержащем элементе (убивая производительность) и поэтому выполните однократный обратный вызов анимации один раз для каждого элемента в object_to_be_emptied. С более чем несколькими парами, это превратится в настоящую проблему.

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

$('#object_to_be_emptied').fadeOut(500, function() {
    $(this).empty();
});

Также обратите внимание, что я использовал this в функции обратного вызова – jQuery устанавливает this как элемент DOM, который является объектом функции обратного вызова; в этом случае object_to_be_emptied. Использование this сохраняет некоторую типизацию и упрощает преобразование кода вниз.

Ответ 3

вы, вероятно, ищете что-то вроде:

$('#object_to_be_emptied').children().fadeOut(500,function(){
  $('#object_to_be_emptied').empty()
});