JQuery: анимированный, непрерывный цикл через детей

Question

Близко, но не совсем там. Я хотел бы, чтобы первый дочерний элемент div отображался в течение пары секунд, скользил вниз (посредством позиционирования) и исчезал из поля зрения, затем следующий дочерний элемент скользил вверх и исчезал в поле зрения. Повторяйте непрерывно, повторяя цикл после отображения последнего ребенка.

Похоже, у меня работает цикл, хотя счетчик, похоже, складывает дочерние элементы друг над другом. Что я делаю не так?

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

Answer 1

Вот мой ремикс: http://jsfiddle.net/ddrace/DJuV7/1/

Я переставил некоторые вещи, чтобы сделать его более понятным, и добавил настройки для паузы и анимации, чтобы сделать его СУХИМЫМ и легче настраивать.

Answer 2

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

Просто с помощью обратного вызова complete для рекурсивного вызова nextQuote

Answer 3

Выглядит ли это нормально http://jsfiddle.net/Xmk2y/5/

Я убрал задержку, установил i = 0 и поменял местами верхние значения.

Answer 4

Кажется, было несколько проблем в соответствии с тем, что вы упомянули. Сначала было установить индекс на -1. Это, казалось, стало причиной появления всех проблем. Затем были анимации, я обновил их, чтобы использовать обещания jquery, чтобы обеспечить завершение анимации предыдущего.

Конечный результат: http://jsfiddle.net/bfbuS/2/

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

Answer 5

Ну, это тоже работает: http://jsfiddle.net/Xmk2y/7/. Но я думаю, что мне больше нравится решение Бири.