JQuery how to make synchronous animation?

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 used .animate({width: width}, speed)and it works fine. But there is one thing that makes me sick, the animation is not synchronous. As a result, the right border flickers back and forth. In the middle of the animation, the total width is about 3 pixels smaller than it should be.

I tried to adjust the speed, this does not help with flickering, and I did not see a big improvement in the overall animation.

If that matters, I use divswith background-imageand overflow: hidden;enclosed in tags li. I am doing extensions liand divwider (the tag lialso contains some text.)

:
, ?

:

$(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);

, , , , , .

Answer 1

, queue buildup. stop animiate, :

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

:

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

, jQuery Easing Plugin.

Answer 2

3 .

.