Bug Tracker

Modify

Ticket #4102 (closed enhancement: fixed)

Opened 5 years ago

Last modified 2 years ago

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:
Blocking: Blocked by:

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.

Change History

comment:1 Changed 5 years ago by dmethvin

  • Component changed from unfilled to fx

comment:2 Changed 5 years ago by dmethvin

  • Summary changed from add delaty to Animate to add delay to Animate

comment:3 Changed 5 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 4 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.:

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

comment:5 Changed 4 years ago by dmethvin

  • Status changed from new to closed
  • Resolution set to fixed

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.