Javascript jquery/css的水平滚动问题

我正在尝试在ul/li上使用jquery animate（）创建一个非常简单的水平滚动效果，如您在这里看到的

我有一些问题，但我真的被困在

1） 当你点击“向左走”时，它的工作（几乎）完美-项目看起来好像它们跳到了右边，当它们被推离页面到右边时，它们消失在“向右走”文本后面-问题是，这个规则的例外是最后一个按钮被推下（在本例中为“按钮1”）-我不知道为什么，但当它跳出屏幕时，它会移动到“向右”文本的前面，甚至（如果你走得慢的话）会稍微改变格式（文本“Button 1”会跳到第二行）

2） 当你点击“向右转”时，效果会更糟——元素不会消失在“向左转”文本的后面，它们只是跳过它，模糊文本。这不是一个z-索引问题，但似乎以下代码

$('#tagUl').animate({
            marginLeft: "+=200px"
          }, "fast");

（对于“向左走”效果很好，但对于“向右走”效果，不能简单地更改为“-=200px”）。我再一次没有关于为什么会发生这种情况的理论

---

3） 与其说是一个问题，不如说是一个一般性的问题，但我不确定限制滚动效果的最佳方式是什么，这样你就不能无限滚动（远远超过屏幕上显示的任何元素）。如果您对如何实现这一目标有任何一般性的想法，我们将不胜感激-谢谢

Give

溢出：隐藏

到

.tagUlContainer

以使其正常工作

并应用以下css使转换正确：

#tagUl{
  transition:1s all;
  -webkit-transition:1s all;
}

---

给定

溢出：隐藏

到

.tagUlContainer

以使其正常工作

并应用以下css使转换正确：

#tagUl{
  transition:1s all;
  -webkit-transition:1s all;
}

---

谢谢ketan-太简单了-很抱歉我错过了。我将此标记为正确答案（在4分钟内），因为它回答了我问题的核心-也非常感谢任何人对第3点的想法。钳制函数可以工作，类似于

Math.min（Math.max（newLeftValue，-$（'#tagUl'）.width（）），0）

。请注意#tagUI's Widthesory Av Avt之前的负号，努力想知道在我发布的代码笔中到底应该把它整合到哪里，以及“newLeftValue”从哪里来-有没有可能用叉子来演示这种方法？谢谢ketan-太简单了-抱歉我错过了。我将此标记为正确答案（在4分钟内），因为它回答了我问题的核心-也非常感谢任何人对第3点的想法。钳制函数可以工作，类似于

Math.min（Math.max（newLeftValue，-$（'#tagUl'）.width（）），0）

。请注意#tagUI的Av Avt之前的负号，努力想知道在我发布的codepen中到底在哪里集成它，以及“newLeftValue”从哪里来——有没有可能用叉子来演示这种方法？