Simulate delayed-fade in jQuery

Filed under javascript, jquery, programming, quickie, and web.

Unfortunately there is no .delay() function in jQuery. You can fake this, however, by using the .fadeTo() function:

$("#my_element").fadeIn(1000).fadeTo(5000, 1).fadeOut(1000);

This will fade the element in in one second, simulate a delay for 5 seconds (by fading it from 100% opacity to 100% opacity), then fade the element out in one second.

Obviously you can do the reverse:

$("#my_element").fadeOut(1000).fadeTo(5000, 0).fadeIn(1000);

… and any combination thereof.


If you enjoyed this post, please follow us on twitter or subscribe to our feed!