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.