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问题。尝试在animiate方法之前使用stop方法，例如：

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

更多信息：

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

至于流畅的动画，你可以去jQuery Easing Plugin。

Answer 2

在动画中间总宽度约为3像素比它应该的那样。

尝试将缓动设置为线性。

jQuery，如何制作同步动画？

2 个答案: