title: jQuery Endless Scrolling loop
body: <p>I have a project on jsFiddle:</p>
  <p><a href="http://jsfiddle.net/willisilliw/aPgPk/" rel="nofollow noreferrer">jsFiddle Link</a></p>
  <p><strong>JavaScript:</strong></p>
  <pre><code>var scroller = function() {
      $('#holder div').animate({
          left: ($t.attr('id') == 'prev' ? '-=' : '+=') + 3
      }, 10, 'linear', function() {
          if ($(this).position().left &lt; -$('li:first-child', this).width()) {
              w = $('li:first-child', this).totalWidth();
              $('li:first-child', this).appendTo('ul', this);
              $(this).css('left', $(this).position().left + w);
          }
      });
  };
  
  $.fn.extend({
      totalWidth: function() {
          return this.outerWidth() + parseInt(this.css('margin-left'), 10) + parseInt(this.css('margin-right'), 10);
      }
  });
  wdth = 0;
  $('#marquee ul li').each(function() {
      wdth += $(this).totalWidth();
  });
  $('#holder div').width(wdth);
  var to;
  $('#prev, #next').css('top', ($('#marquee').outerHeight() - $('#prev').outerHeight()) / 2).live('mousedown mouseup', function(e) {
      $t = $(this);
      if (e.type == 'mousedown') {
          to = setInterval(scroller, 15);
      }
      else {
          clearInterval(to);
      }
  });
  </code></pre>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;div id=&quot;marquee&quot;&gt;
      &lt;div id=&quot;prev&quot;&gt;&lt;&lt;/div&gt;
      &lt;div id=&quot;next&quot;&gt;&gt;&lt;/div&gt;
      &lt;div id=&quot;holder&quot;&gt;
          &lt;div&gt;
          &lt;ul&gt;
              &lt;li&gt;Part 1&lt;/li&gt;
              &lt;li&gt;Part 2&lt;/li&gt;
              &lt;li&gt;Part 3&lt;/li&gt;
              &lt;li&gt;Part 4&lt;/li&gt;
              &lt;li&gt;Part 5&lt;/li&gt;
              &lt;li&gt;Part 6&lt;/li&gt;
              &lt;li&gt;Part 7&lt;/li&gt;
              &lt;li&gt;Part 8&lt;/li&gt;
              &lt;li&gt;Part 9&lt;/li&gt;
              &lt;li&gt;Part 10&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre><code>* {
      font-family: verdana;
      font-size: 12px;
  }
  #marquee {
      top: 50px;
      position: relative;
      width: 80%;
      height: 34px;
      background-color: #CCC;
      margin: 0 auto;
      padding: 0;
  }
  #holder {
      overflow: hidden;
  position: absolute;
      left: 5px;
      right: 5px;
      top: 5px;
      bottom: 5px;
  }
  #holder div {
      position: absolute;
  }
  #marquee ul li {
      display: inline-block;
      float: left;
      margin-left: 5px;
      padding: 5px 7px;
      background-color: #555;
  }
  #marquee ul li:nth-child(2n+1) {
  background-color: #888;
  }
  #marquee ul li:first-child {
      margin-left: 0;
  }
  #prev, #next {
      position: absolute;
      top: 10px;
      background-color: #66F;
      padding: 2px;
      cursor: pointer;
      z-index: 9002;
  }
  #prev {
      left: -13px;
      border-radius: 5px 0 0 5px;
  }
  #next {
      right : -13px;
      border-radius: 0 5px 5px 0;
  }
  </code></pre>
  <p>what I am trying to achieve is a scrolling loop on mousedown, stopping on mouseup.</p>
  <p>I have been able to make it scroll, and loop but it 'jumps' on every loop change.</p>
  <p>Does anyone have any ideas?</p>
  <hr />
  <p>I have edited the fiddle to remove the CSS rule, also edited the code slightly.</p>
  <p>Originally when it scrolled left, it jumped back about 20px and this was made to seem worse by the CSS rule!</p>
  <p>Also the animation goes on in 10ms but it loops every 15ms due to the fact that on mouseup the loop would continue for a bit.</p>
  <p>The right does not loop because since I did not know how to do the left, I would not waste time making it scroll right erroneously when i could simply make it scroll correctly when it was ready.</p>
  <p>I am not using a plugin because I want to learn how to do it myself (stubborn!)</p>