jQuery：如何在不相互碰撞的情况下为两个元素设置动画答案

【问题标题】：jQuery: How to animate two elements without them bumping each otherjQuery：如何在不相互碰撞的情况下为两个元素设置动画
【发布时间】：2012-01-24 09:23:39
【问题描述】：

我正在尝试让 100% 宽度的表格“滑过”以显示其后面的“面板”。

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

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

如何让它们同时滑动并保持位置？

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

更新：

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

更新 2：

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

这带来了第二个问题。您必须单击该行两次才能开始像我期望的那样运行。它的默认状态是表格展开而面板隐藏。单击一行两次后，它开始更接近我的预期（除了它仍然存在原始问题中的问题）。对此的帮助也将不胜感激。

【问题讨论】：

标签： javascript jquery jquery-ui jquery-animate

【解决方案1】：

终于搞定了。完成后必须使用 animate() 函数并传入回调以隐藏 div。

查看这个 jsFiddle：http://jsfiddle.net/744BL/

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

【讨论】：

【解决方案2】：

这个css会做

html，将id为task-details-container的容器添加到task-details

CSS

#task-list table {
    width: 75%;
}
.details-active {
    padding-right: 0px;
}
#task-details-container {
    width: 25%;
    float: right;
}
#task-details {
    width: 100%;
    padding: 0;
    display:none;
}

我希望这是你想要的，请查看我更改的 css

**更新

【讨论】：

有效.. 但如果 thw windows widht 很小，它似乎会覆盖。 +1
这不符合我的需要有两个原因：1）我需要它是固定宽度，而不是百分比宽度。 2) 我需要表格从一开始就为 100% 宽度。