我已经摆弄这个问题已有一段时间了，无法弄清楚是我的代码还是jQuery出现了问题。
我正在两个浮动的两个不同列表（A和B）上同时执行两个.animate（），目的是像这样折叠A并展开B：
$('elementA').animate({width: "hide", opacity: 0});
$('elementB').animate({width: "show", opacity: 1});
它用于在水平菜单栏中的子菜单，单击父顶级菜单项时，该子菜单应弹出。问题在于，在折叠指定的元素之后，它似乎“出现毛刺”，因此在真正隐藏自身之前创建了丑陋的1ms全宽渲染。问题已在Google Chrome和Firefox（可能也在Safari）中得到验证。
在这里查看jsfiddle上的沙盒示例：http://jsfiddle.net/XehBN/
请注意，某些代码似乎太过冗长，但可以考虑多个列表项等。
哪里出问题了？在此先感谢大家
编辑，澄清：
使用“隐藏”和“显示”而不是以像素为单位的硬编码单位的原因是，我无法预见元素的总宽度，因为可能会有多个菜单列表项具有不同的文本长度。如果是产生错误的jQuery自动魔术师，也许可以通过jQuery检索生成的宽度，将其保存在变量中，然后稍后再使用？
最佳答案
我自由地设置了another jsfiddle example。我在那里所做的是将关闭子菜单设置为1px的动画，然后删除了style属性（因此它再次继承了默认样式）。
因为只有1px且淡入淡出效果已经完成，所以轻微的跳跃并不是很明显。
请注意，我仅在Chrome上进行过测试-我不确定其他浏览器的性能。
希望能给您带来一些帮助！