CSS移除指定情况下的空白间隙

Question

看一下这个。

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

当您点击右下方框体的空白部分时，“TOO”会添加到ul中并向上动画。这将导致添加到#window-frame的空白处。我不希望有这种情况。我希望“TOO”和“NEXT ITEM”之间没有间隙。CSS可否实现此操作？我不想使用JS来处理高度。另外，您对为什么会发生这种情况有何见解？

谢谢。

- Booker

---

我认为我能看出你想要实现什么，是否可以删除类似 这样的内容？ - T I

Answer 1

尝试使用margin-top代替动画top属性：

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

这里有一个示例：http://jsfiddle.net/DTxQf/27/ 另外，顺带一提，您创建了一个没有 var 语句的 height 变量，这将其放置在全局范围内（否则它将位于 window.load 事件处理程序作用域内）。始终使用 var 确保不会不必要地创建全局变量（这会每次查找变量时产生额外开销）。

- Jasper

---

不用谢。我刚刚再次查看了代码，发现新添加的列表项高度为30px，而您只将<ul>元素的高度减少了20px，这意味着每次单击都会将“下一个项目”文本向下推动10px。 - Jasper

Answer 2

如果列表必须相对定位，请使用动画marginTop而不是top。 JSFiddle

- Wes Pearce

---

我在你的答案中添加了一个JSFiddle。希望你不会生我的气。 - gdoron

Answer 3

这应该可以解释: http://jsfiddle.net/DTxQf/32/

MOO在哪里？它不可见（在顶部之下），但它仍然存在。
尽管将列表向上移动了20像素，但它仍占据相同的空间。

- ANeves