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.