动画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;
}