Azharkamar.com

Hide DIV/SPAN Element Automatically After a Few Seconds Using jQuery

Snippets
6 Jan 2011
9 comments

One of the many ways to get 100% attention from your website visitors is to interact with them using popups. Nope, not the 90s, ugly, annoying popup but the neat jQuery modal one. And sometimes you wanna automatically fade out that DIV / SPAN popup element in effort to improve user experience, so here’s something you might find useful.

Of course the most popular JavaScript library, jQuery, is used in this method of automatically fading out and hiding a popup box after a few seconds. I’ve used this code once, when my client requested a popup containing promotions on the home page to automatically fadeout after 5 seconds.

jQuery Auto Fade Function

Here’s the code:

$(document).ready(function(){
   setTimeout(function(){
      $("#popupBox").fadeOut("slow") //#popupBox is the DIV to fade out
   }, 5000); //5000 equals 5 seconds
});

Have fun boys and girls. ;)

Author - Azhar Kamar
9 Comments Revolving around this Article
  1. jessie

    Finally! Got one that works, thanks!!!!!

  2. 4DECOR

    Thank you, I’ll use it on my webshop page for displaying cart when new product is added to the cart.

  3. Artbeard

    Beautiful! So much posibillities with this little piece of code;)

  4. chetan channe

    Hey thanks mate, Its very helpful



    Azhar Kamar replied:

    @chetan channe, no problem!

  5. johnconnor

    THX!!! It is so simple but very useful.



    Azhar Kamar replied:

    @johnconnor, yup most definitely ;)

  6. Suresh Pattu

    very nice thank you very much.



    Azhar Kamar replied:

    @Suresh Pattu, you’re welcome!

Write a Comment! NOW! :)

Current ye@r *