Bug Tracker

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#11351 closed bug (cantfix)

jQuery Animate - Complete Function - Fires before animation render complete

Reported by: James <[email protected]…> Owned by: gnarf
Priority: low Milestone: 1.8
Component: effects Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:

Description

The Bug: Running an animation calls it's complete function before the browser completes rendering the animation IF the code called during the complete is slow and the animation is fast.

When running the test below you will see the green slide left showing the blue. But because the complete is called before the animation is done and because the complete calls a slow function the animation hangs just short of the left edge. Eventually it will jump to the edge once the slow function is complete.

It is very important that you test with a slow function for the browser you are testing with. I am using Chrome 17 on a MacBook Air and using 20,000 console.log calls to simulate slow code in the complete function. In Safari 5 I need to use 60,000 log calls. In Firefox only 10,000 are needed.

Let me know if you need more details.

JSFiddle: http://jsfiddle.net/eqSNC/

Screenshot of issue: (notice the green to the left side) http://i39.tinypic.com/29le78n.png

Change History (5)

comment:1 Changed 11 years ago by Rick Waldron

Component: unfiledeffects
Milestone: None1.8
Owner: set to gnarf
Priority: undecidedlow
Status: newassigned

@gnarf can you confirm this?

comment:2 Changed 11 years ago by James <[email protected]…>

gnarf,

If you need additional details or help reproducing let me know.

Thanks, James

comment:3 Changed 11 years ago by gnarf

Resolution: cantfix
Status: assignedclosed

Confirmed - I'm not comfortable "fixing" this issue. Animation callbacks need to be sync (called immediately after the last frame finishes setting properties) so that when one animation ends the next one in the queue can immediately start. It's also important that the animation callback is called after the one animation finishes but BEFORE the next one begins.

Its hopefully easy enough to workaround: "defer" your callback function as you did with the setTimeout.

Personal vote: cantfix

comment:4 Changed 11 years ago by scottgonzalez

Is this problem limited to the actual rendering because the browser hasn't done a repaint yet? If you query for the state, does the browser show that the values are what you expect at the end? Is the element still marked as :animated? If it's just a painting issue, I think leaving this closed is fine.

comment:5 Changed 11 years ago by gnarf

I'm 99.9% sure its because the JS hasn't yet had a chance to let the browser actually render the "final value"

Note: See TracTickets for help on using tickets.