Skip to main content

Bug Tracker

Side navigation

#11797 closed enhancement (fixed)

Opened May 22, 2012 09:30AM UTC

Closed July 13, 2012 08:49PM UTC

New animation related events

Reported by: imdad.sk@gmail.com Owned by: gnarf
Priority: high Milestone: 1.8
Component: effects Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:
Description

http://api.jquery.com/animate/

The .animate() supports

properties [, duration] [, easing] [, complete]

There should be more animation related events in addition to complete

like start which will be fired when animation is started.

And finish which will be fired when animation is completed or stopped/aborted some how.

Attachments (0)
Change History (16)

Changed May 29, 2012 03:42PM UTC by gnarf comment:1

owner: → gnarf
status: newassigned

This might be really easy to implement with the new base of code in 1.8 -- If we want to, I suppose now would be the time to do it?

Changed May 29, 2012 09:27PM UTC by dmethvin comment:2

Not sure about the use cases and semantics here. Actual events, or just callbacks? If callbacks, would these be added to the property hash or to the arg list? If events, would the event be fired on the element being animated and would it bubble, which would be relatively expensive?

Changed May 31, 2012 05:25PM UTC by gnarf comment:3

_comment0: Callbacks - the "options" hash. \ \ {{{ \ \ $.fn.animate( props, opts ); \ \ opts = { \ start: // called during animation startup ( after prefilters) \ complete: // called when animation plays its last frame - not called when interrupted early \ stopped: // called when animation is stopped early ( has a boolean indicating "gotoEnd" ) \ always: // called when animation is done \ }; \ \ }}} \ \ I'm not happy with the name "always", but I like it more than "finish" since finish seems to imply the animation completed. "complete" currently is the only defined callback. \ \ start seems useful, stopped could also be useful, and "always" (or a better name) more so... \ \ I'd also like to propose that the "first argument" to each of these functions (none is currently defined for "complete" ) be the "animation" object from jQuery 1.8. \ \ \ Just to go over the expected calling for various ways an animation finishes, when an animation is stopped by: \ \ .stop( false, true /*gotoEnd*/ ) - calls {{{ stopped( anim, true ) }}}, {{{ complete( anim }}}, {{{ always( anim ) }}} \ .stop( false, false ) - calls {{{ stopped( anim, false ) }}}, {{{ always( anim ) }}} \ natural completion - calls {{{ complete( anim ) }}}, {{{ always( anim ) }}} \ 1338485264630176

Callbacks - the "options" hash.


$.fn.animate( props, opts );

opts = {
    start: // called during animation startup ( after prefilters)
    complete: // called when animation plays its last frame - not called when interrupted early
    stopped: // called when animation is stopped early ( has a boolean indicating "gotoEnd" )
    always: // called when animation is done
};

I'm not happy with the name "always", but I like it more than "finish" since finish seems to imply the animation completed. "complete" currently is the only defined callback.

start seems useful, stopped could also be useful, and "always" (or a better name) more so...

I'd also like to propose that the "first argument" to each of these functions (none is currently defined for "complete" ) be the "animation" object from jQuery 1.8.

Just to go over the expected calling for various ways an animation finishes, when an animation is stopped by:

.stop( false, true /*gotoEnd*/ )
- calls
 stopped( anim, true ) 
,
 complete( anim  
,
 always( anim ) 
.stop( false, false )
- calls
 stopped( anim, false ) 
,
 always( anim ) 

natural completion - calls

 complete( anim ) 
,
 always( anim ) 

Changed May 31, 2012 06:32PM UTC by gibson042 comment:4

Why come so close to Promise without going all the way?

  • .stop( false, gotoEnd = true ) calls:

1. done( anim, jumpedToEnd = true )

2. always( anim, jumpedToEnd = true )

  • .stop( false, gotoEnd = false ) calls:

1. fail( anim, jumpedToEnd = false )

2. always( anim, jumpedToEnd = false )

  • natural completion calls:

1. done( anim, jumpedToEnd = undefined )

2. always( anim, jumpedToEnd = undefined )

and let done fallback to complete for backwards compatibility.

Changed May 31, 2012 07:19PM UTC by gnarf comment:5

Maybe it is just that simple... +1 gibson

Changed May 31, 2012 08:37PM UTC by dmethvin comment:6

I like that, and prefer it to creating new callbacks.

Changed June 01, 2012 05:32AM UTC by imdad.sk@gmail.com comment:7

Will it be good to have another event/callback for animation progress.

I think it should be fired in each frame of animation.

The event should have properties like

status (notStarted, Running, Completed, Aborted/interrupted) and

progress (the progress percentage)

I know it will cost processor time. But it will be useful for tracking event percentage and also it will make jQuery's animation much flexible.

Changed June 04, 2012 04:57PM UTC by gibson042 comment:8

milestone: None1.8
owner: gnarfgibson042

Changed June 04, 2012 05:10PM UTC by gnarf comment:9

Replying to [comment:7 imdad.sk@…]:

Will it be good to have another event/callback for animation progress. I think it should be fired in each frame of animation. The event should have properties like status (notStarted, Running, Completed, Aborted/interrupted) and progress (the progress percentage) I know it will cost processor time. But it will be useful for tracking event percentage and also it will make jQuery's animation much flexible.

There are other ways to get this information, also there is currently the

step
callback which is called for each property on each frame of the animation.

Changed June 18, 2012 11:20PM UTC by mikesherov comment:10

component: unfiledeffects
priority: undecidedhigh

Changed June 20, 2012 02:07PM UTC by gibson042 comment:11

Changed June 22, 2012 08:38PM UTC by Corey Frang comment:12

resolution: → fixed
status: assignedclosed

Fix #11797. Use Deferred for better animation callbacks. Closes gh-830.

In particular, an animation stopped with gotoEnd will be rejected.

Changeset: 36369ce50ff276dcf2959add7dc949af83b221c2

Changed June 23, 2012 10:03PM UTC by gnarf comment:13

resolution: fixed
status: closedreopened

Replying to [comment:7 imdad.sk@…]:

Will it be good to have another event/callback for animation progress. I think it should be fired in each frame of animation.

On second thought, this is way too useful... Filing a pull request to amend in the "progress" callback which is

 function( anim, progress, remainingMS ) 
Called once per FRAME after all properties have been set.

Changed June 23, 2012 10:11PM UTC by gnarf comment:14

owner: gibson042gnarf
status: reopenedassigned

Changed June 25, 2012 02:27AM UTC by mikesherov comment:15

#11910 is a duplicate of this ticket.

Changed July 13, 2012 08:49PM UTC by gnarf comment:16

resolution: → fixed
status: assignedclosed