jQuery同步动画

Question

经过大量的谷歌搜索仍然无法解决问题，我不得不再次麻烦你们。 http://goo.gl/Ibcdp 如果您在右上方看，您会看到一个搜索框。它有一个很好的小动画效果，在焦点上运行。完整的脚本在这里： http://goo.gl/VFBuk

现在我想要2个动画事件（缩小其他菜单项（我使用两个类，一个普通的，一个item_selected类呈现服务器端）并放大搜索容器div（#the_search_field）的宽度来运行完全同步。如果你仔细观察，你会发现在最后两个项目之间几秒钟内会产生一个微小的间隙。

这是因为动画之间存在延迟..而且，在firefox中，这种情况进一​​步降低，并且由于这种延迟，菜单项的宽度总和超过容器的总宽度并溢出它，这导致一切打破一瞬间。 谢谢你的帮助！

Answer 1

好吧，要解决完全崩溃的Firefox问题，请制作#main_menu overflow: hidden。当物品有点太长时，这可以防止流动破裂。

至于差距，这是计算需要实时的结果。动画将总是相互引导或滞后，因为稍后会调用动画函数调用。您可以通过将它们组合在一起来减少这种情况，但是您必须编写自定义超时/步进功能来执行此操作。使用2个不同的jQuery调用意味着您需要在每个动画队列之间切换jQuery并更新DOM元素。这需要时间。

Answer 2

查看此演示页：

http://ejohn.org/files/sync

查看页面源代码，了解“步骤”功能是如何完成的。