jQuery: animated, continuous loop through children

Question

Close but not quite there. I'd like to have the first child div displayed for a couple seconds, slide down (via positioning) and fade out of view, then the next child slide up and fade into view. Repeat continuously, looping back after the last child is displayed.

Looks like I've got the loop working though the count seems to pile the child divs on top of each other. What am I doing wrong?

http://jsfiddle.net/rrbaker/Xmk2y/4/

Answer 1

It seems there were a few issues according to what you had mentioned. First was setting the index to -1. That seemed to cause the display all issue. Next was the animations, i have updated it to use jquery promises to ensure that the animation of the previous was finished.

End result: http://jsfiddle.net/bfbuS/2/

jQuery Promise: http://api.jquery.com/promise/

Answer 2

http://jsfiddle.net/Quincy/Xmk2y/8/

Just using the complete callback to recursively invoke nextQuote

Answer 3

Well, this works too: http://jsfiddle.net/Xmk2y/7/. But I think I like Birey's solution better.

Answer 4

Here's my remix: http://jsfiddle.net/ddrace/DJuV7/1/

I rearranged some things to make it more understandable and added settings for the pause and animation to keep it DRY and easier to tweak.

Answer 5

Does this look ok http://jsfiddle.net/Xmk2y/5/

I removed the delay , set i = 0 and swapped top values.