jQuery：如何动画两个元素，而不会相互碰撞

Question

我正试图让100％宽度的表格“滑过”以显示其背后的“面板”。

这是一个jsFiddle，其中包含我所处的位置以及发生的“碰撞”示例：http://jsfiddle.net/z93se/2/（使用jQuery UI）

单击表格行以查看转换发生。在动画期间，表格“弹出”新的展开面板。然后在动画之后它回到它所属的左边。

如何让它们同时滑动并保持姿势？

PS - 只要最终结果有效，我可以移动哪些元素具有填充和浮动。

更新

我有两个其他要求：1）在动画之前，表格必须是100％宽度。 2）“滑出”一侧的面板需要固定宽度。

更新2：

新的jsFiddle，使用边框显示表格的宽度（因此更容易玩）。 http://jsfiddle.net/z93se/14/

这引出了第二个问题。您必须单击该行两次才能开始按照我的预期行事。它的默认状态是扩展表并隐藏面板。单击一行两次后，它开始接近我的预期（除了它仍然存在原始问题中的问题）。对此的帮助也将受到赞赏。

Answer 1

终于搞定了。不得不使用animate（）函数并传入一个回调来隐藏div。

请参阅此jsFiddle：http://jsfiddle.net/744BL/

注意：使用ID作为选择器会导致切换到类的问题。