動畫div動作相對於另一個div大小的變化

本質上，我有一個垂直滾動頁面，其中包含多個基於顯示的內容大小不同的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/

所以總結一下，這個問題其實不是誰的高度變化的元素。問題在於它下面的元素，它們會隨着高度變化而立即跳起來或者下降。

來源

2015-04-01 kweb

是像這樣的「全能」的瀏覽器？ – 2015-04-01 16:22:08

是的 - 也許跳躍不是最好的詞，但如果它上面的div增加了300個像素，它下面的所有內容都會立即被推下300個像素。 – kweb 2015-04-01 16:33:11

我刪除了一個.parent（），它看起來更平滑。 https://jsfiddle.net/Hastig/zberQ/17/跳轉到divs之間的空白處。 – 2015-04-03 00:46:58

我首先刪除了行$（this）.parent（）。parent（）。height（0）; - 不知道你是否需要它。

然後在剩下的我刪除了一個.parent，它看起來更平滑，只是邊緣跳躍。

小提琴

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

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

CSS（精簡）

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

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

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

來源

2015-04-03 00:54:04

動畫div動作相對於另一個div大小的變化

回答

相關問題