jQuery, how to make synchronous animations?

Question

I have a page layout that looks something like this

|    image    ||    image    ||    image    |

When you hover over one of the images, I want to make an animation to get something like this

|     image-hover     ||  image  ||  image  |

or

|  image  ||     image-hover     ||   mage  |

or

|  image  ||  image  ||     image-hover     |

I've used the .animate({width: width}, speed) and it works okay. But there is one thing that is bugging me, the animations is not synchronous. The result is that the right border is flickering back and forth. In the middle of the animation the total width is about 3 pixel slimmer than it should it.

I've tried tweaking the speeds, it doesn't help with the flickering, and I didn't see much improvement on the overall animation.

If it makes any difference, I'm using divs with background-image and overflow: hidden; wrapped in li tags. I'm making both the li and div wider (the li tag also hold some text.)

The actual question:
Is it possible to make the animations synchronous, so they happen at the same time nice and smooth?

The code:

$(this).animate({width: 450}, 495)
    .parent("li").animate({width: 450}, 495)
    .next("li").animate({width: 225}, 500)
    .find(".class").animate({width: 225}, 500)
    .parent("li").next("li").animate({width: 225}, 500)
    .find(".class").animate({width: 225}, 500);

I've tried doing the traversing first and assigning the elements to two variables, those to make bigger and those to make smaller, but that didn't really improve things.

Answer 1

I think you are referring to queue buildup problem there. Try using the stop method before the animiate method eg:

$(...).stop().animate({width: width}, speed)

More Info:

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

As for smooth animation, you can go for jQuery Easing Plugin.

Answer 2

In the middle of the animation the total width is about 3 pixel slimmer than it should it.

try to set easing to linear.