Bug Tracker

Opened 8 years ago

Closed 7 years ago

Last modified 5 years ago

#4102 closed enhancement (fixed)

add delay to Animate

Reported by: levitymn Owned by:
Priority: major Milestone: 1.3.2
Component: effects Version: 1.3.1
Keywords: chain, fx, animate, delay, pause Cc:
Blocked by: Blocking:


Some times you would like there to be a delay between the execution of animations in a chain of animations. An example would be when you have a pop-up display that you want to wait one second before it closes on mouseleave.

An option(al parameter) to jQuery.animate that allows the specification of a delay in milliseconds would provide this functionality.

There are thousands of requests on how to do this, that can easily be found with this google query: http://www.google.com/search?hl=en&client=firefox-a&rls=org.mozilla%3Aen-US%3Aofficial&hs=rnJ&q=jquery+delay+animation&btnG=Search

Most solutions involve adding an animation to the chain that effectively does nothing. Most likely not very efficient and certainly not clear for code readability.

The other solution that is often suggested it to use setTimeout but that breaks the chain, rendering one of jQuery's core advantages useless.

Change History (5)

comment:1 Changed 8 years ago by dmethvin

Component: unfilledfx

comment:2 Changed 8 years ago by dmethvin

Summary: add delaty to Animateadd delay to Animate

comment:3 Changed 8 years ago by levitymn

Was thinking that creating a chainable delay function would address the issue with animations and also be usable in other chained calls. That would provide a much more versatile solution.

comment:4 Changed 7 years ago by jrevillini

There is a nice solution proposed here which I support: http://www.ryancoughlin.com/2009/01/22/jquery-timeout-function/

I agree with levitymn that it would be the most versatile way to do it.

In the simplest case, it could be used to do one thing, wait, and then do another. Ex.:


Or to gracefully fade in a series of objects, increasing the delay a bit for each. Ex.:

$('.myelement').each(function (i) { $(this).idle(i * 100).fadeIn(); });

comment:5 Changed 7 years ago by dmethvin

Resolution: fixed
Status: newclosed
Note: See TracTickets for help on using tickets.