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

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 2

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

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

Answer 3

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

Just using the complete callback to recursively invoke nextQuote