Javascript jQuery动画不断跳跃

我有一个文本列表，我正试图在屏幕顶部滚动。 我正在使用jQuery.animate（）来实现这一点。 然而，它只是在接近尾声时不断跳过，并没有显示大部分动画

理想的情况是，在最后它会继续循环滚动

$（'document'）.ready（函数（）{
$（“#滚动条”）。单击（函数（）{
$（“#滚动条*”）。设置动画({
右：“0”
}，1，“线性”）；
$（“#滚动条*”）。设置动画({
左：“0”
}，1000，“线性”）；
});
});
*{
字体系列：Helvetica；
填充：0；
保证金：0；
}
#卷轴{
位置：相对位置；
宽度：100%；
身高：5%；
背景色：黑色；
颜色：白色；
空白：nowrap；
}
#滚动条*{
位置：相对位置；
字号：2em；
文字装饰：无；
显示：内联；
左：100%；
}


这是第一个包含文本的列表项
-
这是第二项清单
-
清单项目3
-
我想这就是你要找的？

HTML:

JS/JQUERY：

$('document').ready(function() {
  $('#scroller').click(function() {
    $('#scroller *').animate({
      left: "1200"
    }, 1, "linear");
   $('#scroller *').animate({
      left: "-1200"
    }, 4000, "linear");
  });
});

编辑：
小说明：

您通过将tekst向右推（这就是为什么它突然跳入框中）开始了动画，但它没有完成动画的部分是因为您没有一直将其设置为屏幕外的动画（如果一个元素的宽度为2000像素，而您的动画左侧为1000像素，则屏幕上仍将保留1000像素）。
我在网上找到的文档，不是答案，但希望有帮助。抱歉，忘记解释了，已将其添加到答案中
* {
  font-family: Helvetica;
  padding: 0;
  margin: 0;
}
#scroller {
  position: relative;
  width: 100%;
  height: 5%;
  background-color: black;
  color: white;
  white-space: nowrap;
  overflow: hidden;
}
#scroller * {
  position: relative;
  font-size: 2em;
  text-decoration: none;
  display: inline;
  left: 100%;
}

$('document').ready(function() {
  $('#scroller').click(function() {
    $('#scroller *').animate({
      left: "1200"
    }, 1, "linear");
   $('#scroller *').animate({
      left: "-1200"
    }, 4000, "linear");
  });
});