javascript - jQuery animate 一直在跳

Question

我有一个文本列表，我正试图在屏幕顶部滚动。 我正在使用 jQuery .animate() 来执行此操作。 然而，它只是一直在接近尾声时跳过，并没有向我展示大部分动画。

理想情况下，它会一直循环滚动。

$('document').ready(function() {
  $('#scroller').click(function() {
    $('#scroller *').animate({
      right: "0"
    }, 1, "linear");
    $('#scroller *').animate({
      left: "0"
    }, 1000, "linear");
  });
});

* {
  font-family: Helvetica;
  padding: 0;
  margin: 0;
}
#scroller {
  position: relative;
  width: 100%;
  height: 5%;
  background-color: black;
  color: white;
  white-space: nowrap;
}
#scroller * {
  position: relative;
  font-size: 2em;
  text-decoration: none;
  display: inline;
  left: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="scroller">
  <li>This is the first list item with text</li>
  <li>&nbsp;-&nbsp;</li>
  <li>This is list item number 2</li>
  <li>&nbsp;-&nbsp;</li>
  <li>List item 3</li>
  <li>&nbsp;-&nbsp;</li>
</ul>

Answer 1

我认为这就是您要找的东西？ https://jsfiddle.net/hysgvjnk/5/

HTML:

<ul id="scroller">
  <li>This is the first list item with text</li>
  <li>&nbsp;-&nbsp;</li>
  <li>This is list item number 2</li>
  <li>&nbsp;-&nbsp;</li>
  <li>List item 3</li>
  <li>&nbsp;-&nbsp;</li>
</ul>

CSS:

* {
  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%;
}

JS/JQUERY:

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

编辑: 小解释:

你通过将 tekst 推到右边来开始你的动画(这就是为什么它突然跳进盒子里)，它没有完成动画的部分是因为你没有把它从一直显示在屏幕上(如果一个元素的宽度为 2000 像素，而您的动画在左侧 1000 像素，则屏幕上仍会留下 1000 像素)。