Bug Tracker

Ticket #11797 (closed enhancement: fixed)

Opened 3 years ago

Last modified 2 years ago

New animation related events

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

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.

Change History

comment:1 Changed 3 years ago by gnarf

  • Owner set to gnarf
  • Status changed from new to assigned

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?

comment:2 Changed 3 years ago by dmethvin

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?

comment:3 Changed 3 years ago by gnarf

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 )

Last edited 3 years ago by gnarf (previous) (diff)

comment:4 Changed 3 years ago by gibson042

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.

comment:5 Changed 3 years ago by gnarf

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

comment:6 Changed 3 years ago by dmethvin

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

comment:7 follow-ups: ↓ 9 ↓ 13 Changed 3 years ago by 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.

comment:8 Changed 3 years ago by gibson042

  • Owner changed from gnarf to gibson042
  • Milestone changed from None to 1.8

comment:9 in reply to: ↑ 7 Changed 3 years ago by gnarf

Replying to 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.

comment:10 Changed 3 years ago by mikesherov

  • Priority changed from undecided to high
  • Component changed from unfiled to effects

comment:12 Changed 3 years ago by Corey Frang

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

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

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

Changeset: 36369ce50ff276dcf2959add7dc949af83b221c2

comment:13 in reply to: ↑ 7 Changed 2 years ago by gnarf

  • Status changed from closed to reopened
  • Resolution fixed deleted

Replying to 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.

comment:14 Changed 2 years ago by gnarf

  • Owner changed from gibson042 to gnarf
  • Status changed from reopened to assigned

comment:15 Changed 2 years ago by mikesherov

#11910 is a duplicate of this ticket.

comment:16 Changed 2 years ago by gnarf

  • Status changed from assigned to closed
  • Resolution set to fixed
Note: See TracTickets for help on using tickets.