title: How to create a horizontal looping ticker in JQuery
body: <p>I am working on a ticker that loops text within the body of a div. I can get it to move the text at a specified rate but I am having trouble figuring out how to get JQuery to loop the text. Once the contents in the div have reached the end, how do I loop it back while still showing rest of the contents from the tail?</p>
  
  <p>Code:</p>
  
  <pre><code>var left = -500;
  $(document).ready(function(e){
  function tick() {
          left++;
          $(".ticker-text").css("margin-left", -left + "px");
          setTimeout(tick, 16);
    }
  
    tick();
  });
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class = "ticker-container"&gt;
      &lt;div class = "ticker-text"&gt;
          start text text text text text text text text text text text text text text text 
          text text text text text text text text text text text text text text text text 
          text text text text text text text text text text text text text text text text end     
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="http://jsfiddle.net/mxu4v/1/" rel="nofollow">http://jsfiddle.net/mxu4v/1/</a></p>