Question

I have a basic carousel at http://jsfiddle.net/v53Fm/

When you click the start button it will scroll to the next item, however I want it to keep scrolling along continuously.

As you can see I have a callback function in the animation finish() which then calls the scrollNext() again to achieve this.

However the carousel.is(':animated') line is stopping it from repeating.

This should not be true as it’s calling scrollNext() from the end of animation callback function so any ideas as to why its doing this?

Answer 1

It looks like the :animated selector is not removed until after the ‘end’ function has completed.

However, this does work:

function scrollNext() {
    var carousel = $('ul');
    if (carousel.is(':animated')) return false;
    carousel.animate({ left: '-=180px' }, 400, finish);
}

function finish() {
   setTimeout(scrollNext,1); //runs the function one millisecond after the finish() method is called
}