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:

Description

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.

Attachments (0)

Change History (5)

Changed February 09, 2009 11:48PM UTC by dmethvin comment:1

component:	unfilled → fx

Changed February 10, 2009 12:51AM UTC by dmethvin comment:2

summary:	add delaty to Animate → add delay to Animate

Changed February 10, 2009 04:50AM UTC by levitymn comment:3

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.

Changed November 30, 2009 03:29PM UTC by jrevillini comment:4

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.:

$('.myelement').fadeIn().idle(2000).fadeOut('slow');

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(); });

Changed August 12, 2010 01:37AM UTC by dmethvin comment:5

resolution:	→ fixed
status:	new → closed

http://api.jquery.com/delay/

Side navigation

#4102 closed enhancement (fixed)