Блог

У меня есть список текста, который я пытаюсь прокрутить в верхней части экрана. Для этого я использую 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>amp;nbsp;-amp;nbsp;</li>
  <li>This is list item number 2</li>
  <li>amp;nbsp;-amp;nbsp;</li>
  <li>List item 3</li>
  <li>amp;nbsp;-amp;nbsp;</li>
</ul>  

Я думаю, это то, что вы ищете? https://jsfiddle.net/hysgvjnk/5 /

HTML:

 <ul id="scroller">
  <li>This is the first list item with text</li>
  <li>amp;nbsp;-amp;nbsp;</li>
  <li>This is list item number 2</li>
  <li>amp;nbsp;-amp;nbsp;</li>
  <li>List item 3</li>
  <li>amp;nbsp;-amp;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");
  });
});
  

Редактировать:
небольшое объяснение:

вы начали анимацию, сдвинув текст вправо (вот почему он внезапно прыгнул в поле), часть анимации не завершилась, потому что вы не анимировали ее полностью на экране (если элемент имеет ширину 2000 пикселей иваша анимация составляет 1000 пикселей влево, 1000 пикселей все равно останутся на экране).