CSS在特定情况下删除空格

Question

Take a look at this.

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

When you click on the body of the lower right box, "TOO" is appended to the ul and animated upwards. This results in white space being added to #window-frame. I do not want this. I want no gap between "TOO" and "NEXT ITEM". Can this be done using CSS? I'd rather not fool with heights using JS. Also, any insight as to why this is happening?

Thanks

Answer 1

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

JSFiddle

Answer 2

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/

Also, on a side-note, you created the height variable without the var statement which put it in the global scope (otherwise it would have been inside the window.load event handler scope). Always use var to make sure you aren't creating global variables unnecessarily (which creates extra overhead each time the variable is looked-up).

Answer 3

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

Where is MOO ? Not visible (under the top fold), but still there.
Despite translating the list up by 20px, it still takes the same space.