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

6 Jan 2011

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:

      $("#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 says:

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

  2. 4DECOR says:

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

  3. Artbeard says:

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

  4. chetan channe says:

    Hey thanks mate, Its very helpful

    Azhar Kamar replied:

    @chetan channe, no problem!

  5. johnconnor says:

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

    Azhar Kamar replied:

    @johnconnor, yup most definitely ;)

  6. Suresh Pattu says:

    very nice thank you very much.

    Azhar Kamar replied:

    @Suresh Pattu, you’re welcome!

Write a Comment! NOW! :)

Current ye@r *