jQuery show for 5 seconds then hide

JqueryHideMessageShowTimed

Jquery Problem Overview


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

How to display the message for 5 seconds then hide?

Jquery Solutions


Solution 1 - Jquery

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 - Jquery

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 - Jquery

Just as simple as this:

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

Solution 4 - Jquery

To show error message of 5 sec using ajax that is save in session in laravel 8

<div id="error">
    @php
	    $error = Session::get('message');
	    echo $error;
	@endphp
</div>
<script>
    $("#error").show();
	setTimeout(function() {
        $("#error").hide();
    }, 5000);
</script>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjosoromaView Question on Stackoverflow
Solution 1 - JqueryNick CraverView Answer on Stackoverflow
Solution 2 - JqueryRahulView Answer on Stackoverflow
Solution 3 - JqueryAntonio OoiView Answer on Stackoverflow
Solution 4 - JqueryMuhammad TalhaView Answer on Stackoverflow