What is the best/correct way to go about synchronizing animations with jQuery? I need to remove the small jitter in the animation for a horizontal accordion.
Here is a link to the issue (the site is a work in progress). http://repaintthecity.com/new/index_2.html
Here is a copy of the problem in jsfiddle, if the test site is acting up: http://jsfiddle.net/cj4MQ/1/
The animation jitter happens on the right-most block. I’ve tried messing with the animation queue, but no implementation seems to remove the jitter completely. Any help/suggestions would be greatly appreciated.
Although it seems like both animations are happening at the same time, they are not. For all practical purposes, imagine them taking turns changing their widths. (read http://ejohn.org/blog/how-javascript-timers-work/)
The simple answer is you can’t and probably shouldn’t. You are animating 2 widths in a single threaded javascript process. You are bound to encounter jittering no matter what if you try to animate it this way.
You can try to hide the jittering by animating the container width to a fixed width while forcing the last element right.