CSS space removal in a specific situation

Question

Take a look at this.

http://jsfiddle.net/DTxQf/18/

When you click on the body of the lower right window, "TOO" is added to ul and animated up. This results in the addition of a space in the # window-frame. I do not want this. I do not want a gap between LLP and NEXT DETAIL. Can this be done using CSS? I would rather not fool around with heights using JS. Also, any understanding of why this is happening?

thanks

Answer 1

Try using margin-top instead of animating the top property:

 $('#latest-image-list').animate({marginTop: "-=20"}, "fast"); 

Here is a demo: http://jsfiddle.net/DTxQf/27/

In addition, on a side note, you created a height variable without a var statement that placed it in the global scope (otherwise it would be inside the scope of the window.load event handler). Always use var to make sure that you do not arbitrarily create global variables (which creates additional overhead every time you look at a variable).

Answer 2

If the list should be relatively positioned, animate marginTop instead of the top.

Jsfiddle

Answer 3

This should explain: http://jsfiddle.net/DTxQf/32/

Where is the MOO ? Not visible (under the upper crease), but still there. Despite translating the list to 20 pixels, it still takes up the same place.