jQuery的，如何使同步动画？ [英] jQuery, how to make synchronous animations?

问题描述

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

I have a page layout that looks something like this

|    image    ||    image    ||    image    |

当你将鼠标悬停在图像中的一个，我想打一个动画来得到这样的事情

When you hover over one of the images, I want to make an animation to get something like this

|     image-hover     ||  image  ||  image  |

或

|  image  ||     image-hover     ||   mage  |

或

|  image  ||  image  ||     image-hover     |

我用 .animate（{宽度：宽度}，速度）和它的作品没关系。但有一件事就是缠着我，动画不同步。其结果是，右边框闪烁来回。在动画的中间的总宽度为约3象素比它应该它更薄。

I've used the .animate({width: width}, speed) and it works okay. But there is one thing that is bugging me, the animations is not synchronous. The result is that the right border is flickering back and forth. In the middle of the animation the total width is about 3 pixel slimmer than it should it.

我试过调整的速度，但不会闪烁的帮忙，我没有看到对整个动画太大起色。

I've tried tweaking the speeds, it doesn't help with the flickering, and I didn't see much improvement on the overall animation.

如果这有什么差别，我使用的div 与背景图片和溢出：隐藏; 包装在里标记。我正在做两个里和 DIV 更广泛的（即里标记还举办一些文本。）

If it makes any difference, I'm using divs with background-image and overflow: hidden; wrapped in li tags. I'm making both the li and div wider (the li tag also hold some text.)

实际问题：结果
是否有可能使动画同步的，所以他们碰巧在同一时间又顺畅？

The actual question:
Is it possible to make the animations synchronous, so they happen at the same time nice and smooth?

的code：

$(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);

我试着做穿越第一和分配元素两个变量，那些做出更大的做小，但是这并没有真正改善的东西。

I've tried doing the traversing first and assigning the elements to two variables, those to make bigger and those to make smaller, but that didn't really improve things.

推荐答案

我想你指的的队列堆积问题在那里。尝试使用 在<$停止 方法C $ C> animiate 方法例如：

I think you are referring to queue buildup problem there. Try using the stop method before the animiate method eg:

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

更多信息：

的http://www.learningjquery.com/2009/01/quick-tip-$p$pvent-animation-queue-buildup

至于流畅的动画，你可以去的jQuery插件缓和。

As for smooth animation, you can go for jQuery Easing Plugin.

这篇关于jQuery的，如何使同步动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！