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

Задача: на сайте выведен элемент, к примеру сообщение, через некоторое время нужно его срыть. Сделать такой прием можно с помощью 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
Предыдущая запись Исключения PHP (Try и Catch)

Комментарии

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

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

Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
5660
+3
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
6869
+10
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
4227
+1
Манипуляции с элементами jQuery
Сборник методов jQuery для управления элементами DOM.
1893
+2
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
16535
+8
Работа с checkbox в JQuery
Сборник приемов JQuery для работы с чекбоксом.
92772
+7