Как скрыть блок через определенное время

Задача: на сайте выведен элемент, к примеру сообщение, через некоторое время нужно его срыть. Сделать такой прием можно с помощью JS таймера setTimeout().

<div id="message">
	This is an awesome message!
</div>

<script>
setTimeout(function(){
	document.getElementById('message').style.display = 'none';
}, 5000);
</script>
HTML

В JQuery всё проще – есть метод delay(), который выполняет задержку анимации для методов slideUp(), fadeOut() или hide().

<div id="message">
	This is an awesome message!
</div>

<script>
$(function(){
	$("#message").delay(5000).slideUp(300);
});
</script>
HTML

Скрытие динамически добавленных элементов

В случае если сообщения выводятся динамически, то лучше применить функцию, которая будет выводить и срывать элементы независимо друг от друга.

Потребуется пустой контейнер <div>:

<div class="message-box"></div>
HTML

В него будут помещается сообщения, и удаляться через 3 секунды.

function set_message(text) {
	var $item = $('<div class="message">' + text + '</div>');
	$item.appendTo($('.message-box')).delay(3000).slideUp(200, function(){
		$item.remove();
	});
}
JS

Вывод сообщений:

$('.btn-1').click(function(){
	set_message('This is an awesome message!');
});

$('.btn-2').click(function(){
	set_message('I agree that your message is awesome!');
});
JS
06.11.2019
Предыдущая запись Мета-тег viewport

Комментарии

, чтобы добавить комментарий.

Другие публикации

Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
12.12.2019
1655
+6
Манипуляции с элементами jQuery
Сборник методов jQuery для управления элементами DOM.
28.01.2020
441
0
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
19.12.2018
2555
+2
Работа с checkbox в JQuery
Сборник приемов JQuery для работы с чекбоксом.
14.12.2016
68750
+4
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
06.11.2017
12300
+7
Работа с Radio Button в JQuery
Сборник приемов работы с радиокнопками в JQuery. Рассмотрим на примере группы контролов с одинаковым name=radio.
04.12.2019
2816
0