jQuery，如何制作同步动画？
我有一个看起来像这样的页面布局
| image || image || image |
当您将鼠标悬停在其中一张图像上时，我想制作一个动画来获得类似的效果
| image-hover || image || image |
或者
| image || image-hover || mage |
，
| image || image || image-hover |
我使用了 .animate({width: width}, speed ) 并且工作正常。但有一件事困扰着我，动画不同步。结果就是右边框来回闪烁。在动画的中间，总宽度比应有的宽度窄了大约 3 像素。
我尝试过调整速度，但它对闪烁没有帮助，而且我没有看到整体动画有太大改进。
如果有什么区别，我将 divs 与 background-image 和 overflow: hide; 一起使用，包裹在 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);
我尝试先进行遍历并将元素分配给两个变量，一个变大，一个变小，但这并没有真正改善情况。
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 |
or
| image || image-hover || mage |
or
| image || image || image-hover |
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.
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?
The 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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为您指的是 队列构建那里有问题。尝试在
animiatestop方法> 方法例如：更多信息：
http://www .learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup
至于流畅的动画，你可以选择jQuery 缓动插件。
I think you are referring to queue buildup problem there. Try using the
stopmethod before theanimiatemethod eg:More Info:
http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup
As for smooth animation, you can go for jQuery Easing Plugin.
尝试将缓动设置为线性。
try to set easing to linear.