Поиск

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

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

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

В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
06.11.2017 7677
Сборник методов как сделать HTML таблицу «полосатой» или, как её еще называют «таблица с зеброй».
12.11.2017 3600
Пример горизонтального меню для лэндингов, в котором реализовано...
19.12.2018 1353
Сборник методов JQuery для работы с выпадающими списками select option с примерами.
05.11.2017 21188
Ниже приведён список MIME-заголовков и расширений файлов.
11.07.2019 417
Чтобы включить отображение пароля в поле password нужно заменить атрибут type="password" на type="text", сделать это...
14.11.2019 54