title: Continuous Animation with jQuery, ajax and jsonp data
body: <p>I have created a JavaScript file that reads jsonp data using ajax request. I am adding the elements in a <li> tag and i am trying to add <li> elements to an animation that moves elements the left continually.</p>
  
  <p>so i have: 
      <code>var url='https://www.example.com/json/list.json/?callback=jsonpCallBack';</code></p>
  
  <pre><code> setInterval(function() {
      $.ajax({
          url : url, 
          dataType:'jsonp',       
          success: function(data)
          {
               var outputhtml='&lt;ul&gt;'; 
               var item = [];
                for(var i =0; i &lt; data.length-1 ;i++)
                {
  
                  var item = data[i];
                  outputhtml+=  '&lt;li&gt;'+item.symbol + ' &amp;nbsp' ;
                  var changeValue=item.change;
                  if(changeValue == 'd')
                  {
                       outputhtml +='&lt;span class="bid-value-down"&gt;' + item.BID+ '&lt;/span&gt; &amp;nbsp&lt;span class="ask-value"&gt;(' +item.ASK+ ')&lt;/span&gt; &amp;nbsp&lt;span class="down"&gt;   &amp;nbsp&lt;/span&gt; &amp;nbsp&amp;nbsp&amp;nbsp| &amp;nbsp&amp;nbsp&amp;nbsp&lt;/li&gt;';
                  }
                  else
                  {
                       outputhtml += '&lt;span class="bid-value-up"&gt;' + item.BID+ '&lt;/span&gt; &amp;nbsp&lt;span class="ask-value"&gt;(' +item.ASK+ ')&lt;/span&gt; &amp;nbsp&lt;span class="up"&gt;  &amp;nbsp &lt;/span&gt; &amp;nbsp&amp;nbsp&amp;nbsp| &amp;nbsp&amp;nbsp&amp;nbsp&lt;/li&gt;' ;
                  }
                }
                outputhtml+="&lt;/ul&gt;";
                $('.quotesbar-ticker').html(outputhtml) ;
                $('.quotesbar-ticker ul li').clone().appendTo('.quotesbar-ticker ul');
                doTicker();
          }
  
      }) 
      },52000 );
  });`   {               }
  </code></pre>
  
  <p>as my main function. Inside my main function i have this call to doTicker();</p>
  
  <pre><code>function doTicker() 
    {
  jQuery(document).ready(function($) { 
       $('.quotesbar-ticker').css('left',0).animate({'left': '-2500px' } , 20000 , 'linear');
   });
  
    }
  </code></pre>
  
  <p>What i want is to display values in a ticker form. But i have a proplem with my animate function and im stuck. Since the current functionality i have currently works as a ticker for a small amount of time and then it stops and starts again. </p>
  
  <p>I dont want to use any fancy plugins since i want to keep my code as short as possible. Any help?
  I will appreciate.   Thanks</p>