jQuery animation() - complete firing too soon

Question

I wrote a little animation script that fades a set of stripes from left to right. After all animations are complete a callback functions shoud run.

The script is here:

http://jsfiddle.net/9zkbu/

It works fine, but I want to do the same for a right-to-left animation:

http://jsfiddle.net/FTrhX/

As you can see the callback function is fired before animation ends :( The only thing I changed is the delay(). What am I doing wrong here? Why is "complete" running before all animations finish?

Answer 1

You are almost there, you did reverse the direction, but forgot on the callback to also account for the reversal. Doing this works for me:

complete: (i == 0) ? function(){alert('done');} : null

Because you are counting the other direction if you try and check complete at cols - 1 you'll get it too early, you need to get it at 0 here. try this one: http://jsfiddle.net/FTrhX/8/

Answer 2

I looked at both your previews and I am really impressed! Though I don't understand why .stop() is needed in the second function.

$('.col-' + i).delay(50 * (cols - i))

This way works fine too, or am I missing something?