Question

我有一个文本列表，我试图滚动屏幕顶部。我正在使用jQuery .animate（）来做到这一点。然而，它只是一直跳到最后，并没有向我展示大部分动画。

理想情况下，最后它会保持循环滚动。

＆＃13;

GetInstance

＆＃13;

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

＆＃13;

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

＆＃13;

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推向右边来开始你的动画（这就是为什么它突然跳进盒子里），其中没有完成动画的部分是因为你没有＆＃ 39;将它从屏幕中一直设置为动画（如果一个元素宽度为2000像素，并且你的动画是左边1000像素，屏幕上仍然会留下1000像素。）

jQuery animate一直在跳跃

1 个答案: