jQuery：如何動畫兩個元素，而不會相互碰撞

我試圖讓一個100％寬度的表「滑過」，以揭示它後面的「面板」。jQuery：如何動畫兩個元素，而不會相互碰撞

這裏是一個用的jsfiddle的我在那裏一個例子，「碰撞」發生這種情況：http://jsfiddle.net/z93se/2/（使用jQuery UI）

單擊錶行看到的過渡發生。在動畫期間，表格會在新展開的面板下彈出。然後在動畫結束後它回到它所屬的左側。

我該如何讓他們同時滑動並保持他們的位置？

PS - 我很滿意移動哪些元素具有填充和浮動，只要最終結果有效。

更新：1）表需要是動畫之前100％的寬度：

兩個我有其他要求。 2）「滑出」側的面板需要固定寬度。

更新2：

新的jsfiddle表示針對使用了邊框的表格的寬度（所以它更容易玩）。 http://jsfiddle.net/z93se/14/

這引發了第二個問題。您必須點擊該行兩次才能開始按照我的預期行事。它的默認狀態是擴展表格並隱藏面板。在雙擊一行後，它開始更接近我的期望（除了它在原始問題中仍存在問題）。幫助也將不勝感激。

來源

2012-01-24 Jeremy Blanchard

終於搞定了。必須使用animate（）函數並在回調中傳遞以在完成時隱藏div。

看到這個的jsfiddle：http://jsfiddle.net/744BL/

注：使用ID作爲選擇造成了一定的問題，切換到類沒有。

來源

2012-01-28 05:41:09

這個CSS會做

HTML，id爲任務的細節容器添加容器任務，細節

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

**更新

來源

2012-01-24 10:32:05 Sudesh

工作..但似乎覆蓋如果窗口widht是samll。 +1 – ppumkin

我已更新我的答案，請檢查 – Sudesh

由於兩個原因，這不符合我的需要：1）我需要它是固定寬度，而不是百分比寬度。 2）我需要桌子從一開始就是100％的寬度。 –

jQuery：如何動畫兩個元素，而不會相互碰撞

回答

相關問題