Javascript jQuery，如何制作同步动画？

我有一个类似这样的页面布局

|    image    ||    image    ||    image    |

|     image-hover     ||  image  ||  image  |

当您将鼠标悬停在其中一个图像上时，我想制作一个动画以获得类似的效果

|    image    ||    image    ||    image    |

|     image-hover     ||  image  ||  image  |

或

或

我使用了

.animate（{width:width}，speed）

，它工作正常。但是有一件事困扰着我，动画不是同步的。结果是右边框来回闪烁。在动画的中间，总宽度比它要小大约3像素。

我尝试过调整速度，但对闪烁没有帮助，我也没有看到整体动画有多大改进

如果有什么不同，我使用

divs

和

背景图像
和
溢出：隐藏包装在
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);

我试着先遍历元素，然后将元素分配给两个变量，一个变大，一个变小，但这并没有真正改善情况。
我想你们指的是那个问题。尝试使用
animiate
方法之前的方法，例如：

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

更多信息：


至于平滑动画，您可以选择

在动画的中间
总宽度约为3像素
不该如此

尝试将缓和设置为线性。
请尝试提供您的代码。。。你可以使用这个网站，如果我们能看到它的运行情况，就很容易发现问题……这是一个使用
stop
方法的好提示。当从一个图像展开到另一个图像展开时，它会使动画效果更好。然而，第一次扩展图像的实际动画是相同的，有或没有停止。它是相同的，有或没有线性放松。我甚至看不出有什么不同。