javascript - jQuery，如何制作同步动画？

Question

我的页面布局看起来像这样

|    image    ||    image    ||    image    |

当你将鼠标悬停在其中一张图片上时，我想制作一个动画来得到这样的东西

|     image-hover     ||  image  ||  image  |

或

|  image  ||     image-hover     ||   mage  |

或

|  image  ||  image  ||     image-hover     |

我使用了 .animate({width: width}, speed) 并且它工作正常。但是有一件事困扰着我，动画不是同步的。结果是右边框来回闪烁。在动画的中间，总宽度比应有的宽度窄了大约 3 个像素。

我试过调整速度，它对闪烁没有帮助，而且我没有看到整体动画有太大改善。

如果它有什么不同，我使用 divs 和 background-image 和 overflow: hidden; 包裹在 li 标签。我正在使 li 和 div 变宽(li 标签也包含一些文本。)

实际问题:
是否可以使动画同步，以便它们同时漂亮流畅地发生？

代码:

$(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 animate 方法之前的方法，例如:

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

更多信息:

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

关于流畅的动画，你可以去jQuery Easing Plugin .