Skip to main content

Bug Tracker

Side navigation

#11351 closed bug (cantfix)

Opened February 15, 2012 02:53PM UTC

Closed May 12, 2012 07:34AM UTC

Last modified May 16, 2012 03:30AM UTC

jQuery Animate - Complete Function - Fires before animation render complete

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

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.


Screenshot of issue: (notice the green to the left side)


Attachments (0)
Change History (5)

Changed April 23, 2012 04:59PM UTC by rwaldron comment:1

component: unfiledeffects
milestone: None1.8
owner: → gnarf
priority: undecidedlow
status: newassigned

@gnarf can you confirm this?

Changed April 23, 2012 05:41PM UTC by James <> comment:2


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



Changed May 12, 2012 07:34AM UTC by gnarf comment:3

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

Changed May 14, 2012 06:15PM UTC by scottgonzalez comment:4

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.

Changed May 16, 2012 03:30AM UTC by gnarf comment:5

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