jQuery carousel is not smoothly scrolling

Question

I am trying to create a carousel in jQuery that is constantly scrolling much like a stock ticker (ie: there should never be a pause in the scrolling animation.)

See a jsFiddle example of what I have attempted so far here: http://jsfiddle.net/c5VQe/

Using the following code, I've created a carousel in 3 lines of code that does exactly what I want except that there is a slight delay after the carousel rotates one time.

function RotateCarousel() {  
    $("ul li:first-child").animate({ marginLeft: -200  }, 1500, function () {
        $("ul li:first-child").appendTo('ul');
        $("ul li:last-child").css('margin-Left', 0);
        RotateCarousel();
    });
}

How can I get rid of this delay?

Note: I'm not interested in using any plugins. It should be possible to eliminate the delay without resorting to a lot of unnecessary code.

Answer 1

Just set the easing option to linear:

$("ul li:first-child").animate({ marginLeft: -200 }, 1500, 'linear', function () {
//                                                         ^-- here

Fiddle

As you haven't set one before, jQuery defaults it to swing.

From the .animate() docs:

Easing

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear.

---

Side-note: Your setTimeout()'s syntax was wrong, it should be

setTimeout(RotateCarousel, 1500); //passing a function object reference

To delay the init of the carousel.