使用宽度时jQuery动画故障：“隐藏”+宽度：“显示”

Question

我一直在解决这个问题已经有一段时间了，无法弄清楚是不是我的代码或jQuery被窃听了。

我在两个不同的列表（A和B）上同时执行两个.animate（），它们都向左浮动，目的是折叠A并像这样展开B：

$('elementA').animate({width: "hide", opacity: 0});
$('elementB').animate({width: "show", opacity: 1});

它用于水平菜单栏中的子菜单，当单击父级topmenu项时，该菜单栏应该弹出。问题是它在折叠指定元素之后似乎“毛刺”，因此在真正隐藏自身之前创建一个丑陋的1ms全宽渲染。问题已在Google Chrome和Firefox中验证（可能也在Safari中）。

在这里查看jsfiddle上的沙盒示例：http://jsfiddle.net/XehBN/
请注意，某些代码可能看起来过于过分，但需要考虑多个列表项等。

问题出在哪里？在此先感谢你们

修改，澄清：

使用“隐藏”和“显示”而不是像素的硬编码单位的原因是我无法预见元素的总宽度，因为可以存在具有不同文本长度的多个菜单列表项。如果是产生故障的jQuery automagic，也许可以通过jQuery检索生成的宽度，将其保存在变量中，然后再使用它？

Answer 1

我冒昧地设置了another jsfiddle example。我在那里做的是将关闭子菜单设置为1px，然后删除style属性（因此它再次继承默认样式）。

因为它只有1px并且淡入淡出效果已经完成，所以轻微的跳跃并不是很明显。

请注意，我仅在Chrome上对此进行了测试 - 我不确定其他浏览器的性能。

希望这能为您提供一些帮助！