javascript - 相对于另一个 div 大小更改的动画 div 移动

Question

在使这个动画对我有用时遇到问题。

基本上我有一个垂直滚动页面，其中有几个 div 元素，这些元素的大小根据显示的内容而变化。正在发生的事情是，随着这些尺寸变化的发生，其他元素也在突然跳跃。我想让它们更平滑一些。

这实际上是一个大型元素( Angular )的一部分，所以我不能引入任何外部库。我创建了一个 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 并且它看起来更平滑，只是边距跳跃。

fiddle

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