Im using jquery for various things on my site, but one thing im not sure how to do, is have it show an element, then wait X seconds, and hide the element.

$('#form').ajaxForm(function() { 
    $('#cartcontents').fadeOut("fast").load('cart.php').fadeIn("fast");
}); 

That's the JavaScript that I'm using now. How could I have it (when the form submits) display the div #notice for 5 seconds, then fadeOut?

Im using jquery for various things on my site, but one thing im not sure how to do, is have it show an element, then wait X seconds, and hide the element.

$('#form').ajaxForm(function() { 
    $('#cartcontents').fadeOut("fast").load('cart.php').fadeIn("fast");
}); 

That's the JavaScript that I'm using now. How could I have it (when the form submits) display the div #notice for 5 seconds, then fadeOut?

• javascript
• jquery

3 Answers 3

$('#form').submit(function() {
   $('#notice').show();
   setTimeout(function() { 
       $('#notice').fadeOut(); 
   }, 5000);
});

in the onSubmit event handler make the div appear by using $('#divName').show() (i think thats correct syntax). The you can use setTimeout("hideDiv()",5000), you then define hideDiv() which is a new function which does $('#divName').fadeOut()

As jQuery is not so popular nowadays. Here is a simple solution with vanilla JavaScript.

const notification = document.querySelector("#notification");
const button = document.querySelector("#button");
button.addEventListener("click", ()=>{
  notification.style.display = "block";
  setTimeout(()=>{notification.style.display="none"},5000);
});

<div id="notification" style="display:none;">
    <p>You clicked the button. Wait for 5 seconds now. </p>
</div>

<button id="button">Click Me to Display </button>

You set the default style to none and change when the button is clicked.