Why does Jquery animation speed up after first run?

Question

I'm making a basic marquee that takes a set of list items and scrolls them (this is for a sports site, they want a news ticker).

Everything works except after the first run the duration speeds up.

var duration = 10000;
var textScroll = function(toScroll, time)
   {
      toScroll.animate({left:"-"+toScroll.children().text().length+"px"},time,"linear", function()
      {
         $(this).css({left:toScroll.children().text().length});
         textScroll($(this),duration);
      });
   };
   textScroll($('.textScroll ul'), duration);

Like i said, it scrolls perfectly. Just gets faster after the first scroll.

Any ideas?

Answer 1

It probably starts off in a different left position on the first animation and so it will appear to animate slower since it's got a shorter distance to animate. You seem to be setting the element's left CSS property to toScroll.children().text().length -- but this only happens after the first animation. What value does left have before the first animation starts?