Блог

Главная - Вопросы по программированию - задержка jquery, похоже, не препятствует выполнению последующей команды

задержка jquery, похоже, не препятствует выполнению последующей команды

#jquery #delay

#jquery #задержка

Вопрос:

У меня есть следующий код jquery: 

 $j('#'   messageId).fadeTo(1000, .3).delay(3000).css("top", 20);

Я ожидаю, что при выполнении этого произойдет следующее:

  1. идентификатор сообщения div исчезает в течение одной секунды, вплоть до .3 непрозрачности
  2. В течение 3 секунд ничего не происходит
  3. Идентификатор сообщения div перемещается на 20 пикселей сверху

Вместо этого задержки нет. Выполняются только шаги 1 и 3, описанные выше, в обратном порядке или другими словами:

  1. Идентификатор сообщения div немедленно перемещается
  2. После перемещения сообщение исчезает в течение одной секунды

Примечание: что я действительно хочу сделать для последнего шага, так это remove() вызов, чтобы извлечь элемент из DOM, но это также, казалось, «сработало» слишком рано, поэтому я подумал, что попробую установить эту позицию css.

Задерживает ли задержка только последующие эффекты, а не последующую настройку css или remove() вызов? Должен ли я использовать функцию javascript setTimeout() для достижения своей цели?

Комментарии:

1. Возможно, этот код в jquery. страница delay() ( api.jquery.com/delay ) предлагает подсказку на решение: $(‘.foo’). slideUp(300).delay(300).queue(функция() { $(this).remove(); });

Ответ №1:

Используйте очередь для нестандартных эффектов. 

 $j('#'   messageId).fadeTo(1000, .3).delay(3000).queue(function(){ 
   $(this).css("top", 20);
});

Вот скрипка.

Ответ №2:

Я считаю, что delay() функция работает только в очереди анимации jQuery. Функция css не является частью очереди анимации. Вы должны выполнить обратный вызов с таймаутом. Например:

 $j('#'   messageId).fadeTo(1000, .3, function() {
    setTimeout(function() {
        $('#'   messageId).css("top", 20);
    }, 3000);
}