CODEWITHSUNDEEP
javascriptjquery
mrpatg
mrpatg

Reputation: 10117

show div for a set time, then hide it

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?

Upvotes: 9

Views: 17243

Answers (3)

Sanan Ali
Sanan Ali

Reputation: 3417

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.

Upvotes: 0

Jacob Relkin
Jacob Relkin

Reputation: 163228

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

Upvotes: 19

Aly
Aly

Reputation: 16255

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()

Upvotes: 3

Related Questions