jQuery show for 5 seconds then hide

Question

I'm using .show to display a hidden message after a successful form submit.

How to display the message for 5 seconds then hide?

Solution 1

You can use .delay() before an animation, like this:

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

If it's not an animation, use setTimeout() directly, like this:

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

You do the second because .hide() wouldn't normally be on the animation (fx) queue without a duration, it's just an instant effect.

Or, another option is to use .delay() and .queue() yourself, like this:

$("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});

Solution 2

You can use the below effect to animate, you can change the values as per your requirements

$("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow'); 

Solution 3

Just as simple as this:

$("#myElem").show("slow").delay(5000).hide("slow");

Comments

[Kevin Zych]

Suggestion 2 worked perfectly with showing a checkmark icon and using fadeOut() instead of hide(). Great answer.

[Wesley Smith]

@wilsjd No you can't, .delay() will not work with .hide() the element will be shown then immediately hidden. See this jsFiddle this is why Nick stated "If it's not an animation, use setTimeout() directly, like this:...."

[wilsjd]

Hmm, I wonder if that used to work two years ago. Nice find though. Thanks for keeping me honest.

[alamnaryab]

I have also implemented this, but when I show msg twice within 5 seconds then it should hide prev and re-show, while it do not reset delay of first

[entitycs]

$(...).fadeIn(...).animate(...).effect is not a function in JQuery 2.1.3

[Rahul]

@DustinCharles Add jQueryUI not just jQuery. jQuery doesn't contain the effect() function e.g. code.jquery.com/ui/1.12.0/jquery-ui.min.js