動畫div相對於另一個div大小更改的運動

Question

在使此動畫對我有用時遇到問題。

本質上，我有一個垂直滾動頁面，其中包含多個div元素，這些元素的大小根據所顯示的內容而有所不同。 發生的情況是，隨着這些大小的變化發生，其他元素也在突然跳躍。 我想使它們更加平滑。

這實際上是一個龐大項目（角）的一部分，因此我無法引入任何外部庫。 我創建了一個jfiddle來說明問題。

$('.close').click(function () {
    $(this).parent().parent().height(0);
    $(this).parent().parent().slideUp(500);// in case if you want to move the second div up.

});

http://jsfiddle.net/zberQ/5/

綜上所述，實際上問題不在於高度在變化的元素。 問題在於其下方的元素會響應此高度變化而立即向上或向下跳躍。

Answer 1

我首先刪除了行$（this）.parent（）。parent（）。height（0）; -不確定是否需要。

然后在其余部分中，我刪除了.parent，看起來更平滑，只是邊距跳了。

小提琴

https://jsfiddle.net/Hastig/zberQ/17/

JS

$('.close').click(function() {
    $(this).parent().slideUp(400);
});

CSS（向下精簡）

.publication1 {
    background: red;
    color: white;
}

.publication2 {
    background: green;
    color: white;
}

.publication3 {
    background: blue;
    color: white;
}