Question

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.

Answer 1

If you have the last added div as a jQuery object, you can calculate the y-position of it’s bottom by

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

Then you would animate the top value of your new div to equal divBottom.