Почему я не могу отложить вызов удаления с помощью jQuery

#jquery #jquery-ui #delay

#jquery #jquery-ui #задержка

Вопрос:

Я бы хотел, чтобы div исчез, а затем был удален:

  $('#div').delay(1000).fadeOut(300);
 $('#div').delay(1300).remove();

К сожалению, это просто удаляет div напрямую, без задержек. Почему я не могу отложить действие удаления? Какие существуют решения?

Спасибо

1. Почти уверен delay , что работает только для анимации.

2. задержка предназначена для использования с эффектами анимации, а не с методами манипулирования jQuery DOM

3. $('#div').delay(1000).fadeOut(300, function(){$(this).remove();}); ?

4. У @Rocket есть ответ. и, вероятно, следует опубликовать его комментарий, поскольку это правильный ответ для данной ситуации.

Ответ №1:

Если вы хотите, чтобы элемент был удален после того, как он исчезнет, вы можете fadeOut использовать параметр обратного вызова.

 $('#div').delay(1000).fadeOut(300, function(){
   $(this).remove();
});

Ответ №2:

.delay() работает только с методами, которые проходят через очередь анимации. Таким образом, это работает для .fadeOut() (анимации), но не .remove() (не анимации).

Чтобы показать вам, насколько это специализировано, это не задерживает:

 $('#div').delay(1000).hide();

Но это делает:

  $('#div').delay(1000).hide(1);

Указание длительности для метода hide превращает его в анимацию, которая затем использует очередь анимации, с которой затем работает .delay() .

Чтобы удалить элемент с задержкой, вы можете использовать setTimeout() вызов:

 setTimeout(function() {
    $('#div').remove();
}, 1300);

или немного усложнить и использовать функцию завершения для анимации, подобной этой:

 $('#div').delay(1000).hide(1, function() {
    $(this).remove();
});

1. hide все еще сохраняет элемент в DOM, тогда как remove этого не делает.

2. хм, спасибо за ваш ответ. Существуют ли методы задержки, которые работают с действиями без анимации?

3. @jay: Есть хороший вариант setTimeout , но кроме этого, не совсем. Это работает для анимаций, потому что они находятся в очереди (и, вероятно, используется setTimeout в любом случае).

4. Насколько я знаю, в jQuery нет функций задержки, которые работают с операциями вне очереди. Для этого вы просто используете setTimeout(). Я добавил к своему ответу способ использования функции завершения анимации для выполнения удаления. Это позволяет использовать .delay() .

5. @Rocket — прочитайте остальную часть моего ответа, чтобы понять, почему я использовал .hide() в качестве примера. Я просто объясняю, как. delay() работает или не работает. Затем я показываю пару примеров, которые действительно удаляют элемент.

Ответ №3:

Вы можете попробовать что-то вроде этого.

 $('#div').delay(1000).fadeOut(300,function(){
    setTimeout(function(){
      $('#div').remove()
    } ,1300);

});

Я думаю, что это работает так, как должно. Надеюсь, это поможет