Задача: на сайте выведен элемент, к примеру сообщение, через некоторое время нужно его срыть. Сделать такой прием можно с помощью JS таймера setTimeout().
<div id="message">
This is an awesome message!
</div>
<script>
setTimeout(function(){
document.getElementById('message').style.display = 'none';
}, 5000);
</script>В JQuery всё проще – есть метод delay(), который выполняет задержку анимации для методов slideUp(), fadeOut() или hide().
<div id="message">
This is an awesome message!
</div>
<script>
$(function(){
$("#message").delay(5000).slideUp(300);
});
</script>Скрытие динамически добавленных элементов
В случае если сообщения выводятся динамически, то лучше применить функцию, которая будет выводить и срывать элементы независимо друг от друга.
Потребуется пустой контейнер <div>:
<div class="message-box"></div>В него будут помещается сообщения, и удаляться через 3 секунды.
function set_message(text) {
var $item = $('<div class="message">' + text + '</div>');
$item.appendTo($('.message-box')).delay(3000).slideUp(200, function(){
$item.remove();
});
}Вывод сообщений:
$('.btn-1').click(function(){
set_message('This is an awesome message!');
});
$('.btn-2').click(function(){
set_message('I agree that your message is awesome!');
});
