jQuery动画不断跳跃

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像素）。