3

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

|    image    ||    image    ||    image    |

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

|     image-hover     ||  image  ||  image  |

或者

|  image  ||     image-hover     ||   mage  |

或者

|  image  ||  image  ||     image-hover     |

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

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

如果它有任何区别，我正在使用divswithbackground-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);

我已经尝试过先进行遍历并将元素分配给两个变量，一个变大一个变小，但这并没有真正改善事情。

4

2 回答 2

3

我认为您指的是那里的队列堆积问题。尝试在stop方法之前使用该方法，animiate例如：

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

更多信息：

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

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

于 2010-07-22T07:54:31.833 回答
1

在动画的中间，总宽度比它应该的要窄大约 3 个像素。

尝试将缓动设置为线性。

于 2010-07-22T07:56:23.570 回答