title: Preventing "jump" in vertical auto scroll and looping vertical auto scroll
body: <p>My vertical auto scroll seems to stop erratically at some points, I would like to have a smooth scroll instead. Secondly, I would like the vertical scroll to reset automatically (almost loop infinitely or give the implication of it never ending rather than just jumping). How would I go about accomplishing this? Here is my code so far: <a href="http://jsfiddle.net/8KjX8/78/" rel="nofollow">http://jsfiddle.net/8KjX8/78/</a>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;div id='activity_date'&gt;06/11/2012&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div id='activity_date'&gt;06/11/2012&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div id='activity_date'&gt;06/11/2012&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div id='activity_date'&gt;06/11/2012&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div id='activity_date'&gt;06/11/2012&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div id='activity_date'&gt;06/11/2012&lt;/div&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#activity_date {
      background-color: #cc0066;
      color: #FFF;
      width: 80px;
  }
  #wrapper {
      height: 240px;
      overflow: hidden;
  }
  #wrapper ul {
      position: relative;
      list-style-type: none;
  }
  #wrapper li {
      height: 30px;
      line-height: 12px;
      list-style-type: none;
  }
  ​​
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>(function(){
      var i = 0;
  
      function Scroll() {
          i++;
  
          if (i &lt; $('li').length) { // scroll down till we are at the last item
              $('ul').animate({top:'-=30'+'px'}, 1000);
          }
      }
  
      $(document).ready(function() {
          var timeOut;
  
          $('ul').hover(
              function(e) { // on hover in, stop the animation
                  clearTimeout(timeOut);
              }, 
              function(e) { // on hover out, continue
                  timeOut = setInterval(Scroll, 1000);
              }
          );
  
          timeOut = setInterval(Scroll, 1000); // start the animation at document load
  
      });
  
  })();
  ​
  </code></pre>
  
  <p>Thanks in advance!</p>