使用宽度时 jQuery 动画故障 : "hide" + width: "show"

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 上对此进行了测试 - 我不确定其他浏览器上的性能。

希望这能为您提供一些有用的东西!