jQuery показуйте протягом 5 секунд, а потім прихойте


145

Я використовую .showдля відображення прихованого повідомлення після успішного надсилання форми.

Як відобразити повідомлення протягом 5 секунд, а потім приховати?

Відповіді:


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 () замість hid (). Чудова відповідь.
Кевін Зич

2
@wilsjd Ні, ви не можете, не .delay()буде працювати з .hide()елементом, буде показано, а потім негайно приховано. Дивіться цей jsFiddle, ось чому Нік заявив "Якщо це не анімація, використовуйте setTimeout () безпосередньо, як це: ...."
Wesley Smith

Хм, мені цікаво, чи працювало це два роки тому. Хороша знахідка хоч. Дякуємо, що тримаєте мене чесно.
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 не містить функції ефект (), наприклад code.jquery.com/ui/1.12.0/jquery-ui.min.js
Рахул,

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.