如何在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。