CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ryan
Ryan

Reputation: 531

jQuery animate keeps jumping

I have a list of text that I am trying to scroll across the top of the screen. I am using jQuery .animate() to do this. However it just keeps skipping near the end and doesn't show me most of the animation.

Ideally at the end it will just keep looping the scroll.

$('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>

Upvotes: 1

Views: 836

Answers (1)

Grey
Grey

Reputation: 891

I think this is what you're looking for? 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");
  });
});

Edit: small explaining:

you started your animations by pushing the tekst to the right (that's why it jumped into the box all of the sudden), the part of which it didn't finish the animation is because you didn't animate it out of the screen all the way (if an element is 2000 pixels wide, and you're animation is 1000 pixels to the left, 1000 pixel will still be left on the screen).

Upvotes: 2

Related Questions