How animate stacking divs in javascript/css?
- by Teiviere
Say I have 2 divs with the same CSS class that are stacked on top of each other:
div {
width:100px;
height: 100px;
background: red;
}
How do I make it so that when I click a button at the top of the page, a new div is created from off the screen at the bottom and moves upwards stopping where the 2nd div is.. When the button is clicked again, a 4th div moves in from the bottom of the screen and stops where the 3rd div is... etc creating a "stacked" divs effect?
I know about position:fixed and adjusting values for top, but I am not sure how to dynamically calculate where to stop the animation to achieve this effect.
