Как сделать паузу перед удалением элемента с помощью jQuery?
-
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);
Я не возражаю, если на странице есть скрытые разделы (в любом случае их не должно быть больше нескольких).