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

Question

我一直在摆弄这个问题有一段时间了，不知道是我的代码还是 jQuery 出了问题。

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

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

它用于水平菜单栏中的子菜单，当单击父顶部菜单项时应该弹出该子菜单。问题是它似乎在指定元素折叠后立即“出现故障”，因此在真正隐藏自己之前创建了一个丑陋的 1 毫秒全宽渲染。问题已在 Google Chrome 和 Firefox 中得到验证（可能也在 Safari 中）。

在此处查看 jsfiddle 上的沙盒示例：http://jsfiddle.net/XehBN/
请注意，有些代码可能看起来太过分了，但是否需要考虑多个列表项等。

问题出在哪里？先谢谢各位了

编辑、澄清：

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

Answer 1

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

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

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

希望这能给你一些工作！