JQuery animates after callback

Question

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

When you press the Start button, it will go to the next item, however I want it to continue to scroll forward.

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

However, the string carousel.is(':animated') stops it from repeating.

This should not be true as it calls scrollNext() from the end of the animation callback function, so any ideas on why this is being done?

Answer 1

It looks like the animated selector is not removed until the completion function completes.

However, this works:

 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 } 

Answer 2

It seems to be a problem of time. Try:

 function finish() { setTimeout(scrollNext, 100); // adds a 100ms delay } 

Answer 3

Just remove the return statement and increase the animation time. See here .