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. ;)
Finally! Got one that works, thanks!!!!!
Thank you, I’ll use it on my webshop page for displaying cart when new product is added to the cart.
Beautiful! So much posibillities with this little piece of code;)
Hey thanks mate, Its very helpful
April 13th, 2012
Azhar Kamar replied:
@chetan channe, no problem!
THX!!! It is so simple but very useful.
April 13th, 2012
Azhar Kamar replied:
@johnconnor, yup most definitely ;)
very nice thank you very much.
April 13th, 2012
Azhar Kamar replied:
@Suresh Pattu, you’re welcome!