jQuery Animate - Complete Function - Fires before animation render complete

[James <[email protected]…>]

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)

[Rick Waldron]

@gnarf can you confirm this?

[James <[email protected]…>]

gnarf,

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

Thanks, James

[gnarf]

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

[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.

[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"