javascript - 如何使用 jquery 将动态元素列表水平滑入和滑出 div

Question

我使用 div 容器作为窗口，使用 jquery 将水平 li 元素列表滑入和滑出 View 。

这是我到目前为止所拥有的: http://jsfiddle.net/TX5fJ/5/

它初始化一个包含 8 个元素的列表，并允许您在 div 窗口内左右滚动它们。它还具有将元素添加到列表末尾以及从列表开头删除元素的功能。

我正在尝试做的事情:

1) 将元素添加到列表末尾(元素不可见)

2) 向左滚动列表以使刚刚添加的元素可见(第一个元素移出 View )

3)从列表头部删除该元素(不再需要)

问题是删除第一项会导致整个列表向左移动。

如果我不删除第一个元素，它似乎可以工作。 (参见我的测试函数)

我对该解决方案的担忧是 ul 必须足够宽才能容纳所有潜在的元素。如果我不给它固定的宽度，它就不起作用。

所以我想我可以将其设置为 99999px 宽，并在测试按钮中使用当前方法。

有人有关于比当前更好的实现的想法吗？

谢谢。

Answer 1

从头部删除列表项后，您可以简单地重置列表的 margin-left 属性:

function RemoveItem() {
    $('#slider-items li').first().remove();
    $('#slider-items').css('marginLeft', 0);
}  

已更新fiddle .