Как сделать паузу перед удалением элемента с помощью jQuery?

StackOverflow https://stackoverflow.com/questions/42254

  •  09-06-2019
  •  | 
  •  

Вопрос

Я хотел бы опубликовать сообщение об успешном завершении на своей странице.

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

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

Как вы можете анимировать это с помощью jQuery?

Это было полезно?

Решение

Новый delay() функция в jQuery 1.4 должна сделать свое дело.

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();

Другие советы

использование setTimeout(function(){$elem.hide();}, 5000);

Где $elem это элемент, который вы хотите скрыть, и 5000 это задержка в миллисекундах.На самом деле вы можете использовать любую функцию в рамках вызова setTimeout(), этот код просто определяет небольшую анонимную функцию для простоты.

В то время как подход @John Sheehan работает, вы сталкиваетесь с Сбой в jQuery fadeIn / fadeOut ClearType в IE7.Лично я бы выбрал @John Millikin's setTimeout() подход, но если вы настроены на чистый подход jQuery, лучше запустить анимацию для свойства непрозрачности, такого как margin.

var left = parseInt($('#element').css('marginLeft'));
$('#element')
    .animate({ marginLeft: left ? left : 0 }, 5000)
    .fadeOut('fast');

Вы можете быть немного чище, если будете знать, что ваша маржа равна фиксированному значению:

$('#element')
    .animate({ marginLeft: 0 }, 5000)
    .fadeOut('fast');

Редактировать:Это выглядит так, как будто Подключаемый модуль jQuery FxQueues делает как раз то, что вам нужно:

$('#element').fadeOut({
    speed: 'fast',
    preDelay: 5000
});

Для чистого подхода jQuery вы можете сделать

$("#element").animate({opacity: 1.0}, 5000).fadeOut();

Это взлом, но он выполняет свою работу

var $msg = $('#msg-container-id');
$msg.fadeIn(function(){
  setTimeout(function(){
    $msg.fadeOut(function(){
      $msg.remove();
    });
  },5000);
});

Исходя из комментария dansays, следующее, похоже, работает отлично:

$('#thing') .animate({dummy:1}, 2000) .animate({ etc ... });

Обновление для версии 1.6.2

Ответ Натана Лонга приведет к тому, что элемент выскочит без какой-либо задержки или fadeOut.

Это работает:

$('#foo').delay(2000).fadeOut(2000);

ответ дансайса просто не подходит для меня.По какой - то причине, remove() запускается немедленно, и div исчезает до того, как произойдет какая-либо анимация.

Однако следующее работает (за счет опущения remove() способ):

$('#foo').fadeIn(500).delay(5000).fadeOut(500);

Я не возражаю, если на странице есть скрытые разделы (в любом случае их не должно быть больше нескольких).

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top