title: How to create continuous scrolling content using Jquery .animate() function?
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/812049/implementing-circular-scroller-in-jquery">Implementing circular scroller in jquery</a>  </p>
  </blockquote>
  
  
  
  <p>I want to create vertical scroller, which will work exactly like marquee. But I want it to be continuous, like when we use marquee the whole content comes back only after it completely goes up, but I want it to be continuous. </p>
  
  <p>this is what I have... <a href="http://jsfiddle.net/JWfaf/1/" rel="nofollow noreferrer">http://jsfiddle.net/JWfaf/1/</a></p>
  
  <p>I want only in one direction and keep on scrolling. I hope I have cleared what I want to achieve</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="con"&gt;
     &lt;ul&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
         &lt;li&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>function animatethis(targetElement, speed) {
  $(targetElement).animate({ marginTop: "+=250px"},
  {
      duration: speed,
      complete: function ()
      {
          targetElement.animate({ marginTop: "-=250px" },
          {
              duration: speed,
              complete: function ()
              {
                  animatethis(targetElement, speed);
              }
          });
      }
  });
  };
  
  animatethis($('.con ul li:first-child'), 10000);​
  </code></pre>