JQuery показать в течение 5 секунд, а затем скрыть

145

Я использую .showдля отображения скрытого сообщения после успешной отправки формы.

Как вывести сообщение на 5 секунд, а затем скрыть?

josoroma
источник

Ответы:

351

Вы можете использовать .delay()перед анимацией, например так:

$("#myElem").show().delay(5000).fadeOut();

Если это не анимация, используйте setTimeout()напрямую, вот так:

$("#myElem").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);

Вы делаете второй, потому .hide()что обычно не будет на анимации (fx очереди ) без продолжительности, это просто мгновенный эффект.

Или другой вариант - использовать .delay()и .queue()себя, вот так:

$("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});
Ник Крейвер
источник
1
Предложение 2 прекрасно работало с отображением значка галочки и использованием fadeOut () вместо hide (). Отличный ответ.
Кевин Зыч
2
@wilsjd Нет, вы не можете, не .delay()будет работать с .hide()элементом, который будет показан, а затем сразу же скрыт. Посмотрите это jsFiddle. Вот почему Ник заявил: «Если это не анимация, используйте setTimeout () напрямую, например так: ....»
Уэсли Смит,
Хм, интересно, это работало два года назад. Хорошая находка, хотя. Спасибо, что сохранил меня честно
wilsjd
Я также реализовал это, но когда я показываю msg дважды в течение 5 секунд, тогда он должен скрывать prev и повторно показывать, пока не сбрасывает задержку первого
alamnaryab
18

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

$("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow'); 
Рахул
источник
1
$ (...). fadeIn (...). animate (...). эффект не является функцией в JQuery 2.1.3
Дастин Чарльз,
@DustinCharles Добавить jQueryUI, а не только jQuery. jQuery не содержит функцию effect (), например, code.jquery.com/ui/1.12.0/jquery-ui.min.js
Рахул,
0

Так же просто, как это:

$("#myElem").show("slow").delay(5000).hide("slow");
Антонио Оои
источник