如何在javascript/css中動畫堆疊div？

Question

說我有2個div s的被堆疊在彼此的頂部相同的CSS類：

div { 
    width:100px; 
    height: 100px; 
    background: red; 
} 

我如何使它所以，當我在頁面頂部點擊一個按鈕，一個新的div從屏幕底部創建並向上移動，停止第二個div所在的位置。再次單擊該按鈕時，第4個div從屏幕底部移入並停止第3個div所在的位置...等等創造一個「堆疊」divs效果？

我知道position:fixed和調整值爲top，但我不知道如何動態計算停止動畫以實現此效果。

Answer 1

如果最後添加的div作爲一個jQuery對象，你可以計算出y位置的它的底部由

var divTop = $(lastDiv).offset().top; 
var divBottom = divTop + $(lastDiv).outerHeight(); 

那麼你會以動畫形式在新的div頂部值等於divBottom。