Skip to main content

Bug Tracker

Side navigation

#4102 closed enhancement (fixed)

Opened February 09, 2009 10:58PM UTC

Closed August 12, 2010 01:37AM UTC

Last modified March 14, 2012 12:06PM UTC

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

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

summary: add delaty to Animateadd 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: newclosed