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

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

|    image    ||    image    ||    image    |

当您将鼠标悬停在其中一张图像上时,我想制作一个动画来获得类似的图像

|     image-hover     ||  image  ||  image  |

要么

|  image  ||     image-hover     ||   mage  |

要么

|  image  ||  image  ||     image-hover     |

我已经使用了.animate({width：width},speed),它可以正常工作.但是有一件事困扰着我,动画不是同步的.结果是右边界来回闪烁.在动画的中间,总宽度比应该的宽度薄了约3像素.

我尝试调整速度,这对闪烁没有帮助,而且整体动画效果也没有太大改善.

如果有什么不同,我正在使用具有background-image和溢出的div：包装在李标签.我把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);

我尝试先进行遍历,然后将元素分配给两个变量,使它们变大和变小,但这并没有真正改善.

解决方法:

我认为您指的是那里的queue buildup问题.尝试在动画方法之前使用stop方法,例如：

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

更多信息：

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

至于流畅的动画,您可以选择jQuery Easing Plugin.

标签：animation,synchronous,javascript,jquery
来源： https://codeday.me/bug/20191106/1998836.html