jQuery .delay () в циклах анимации

Question

Я пытаюсь сделать базовую анимацию с помощью jQuery. Я хочу добавить несколько элементов, но я хотел бы добавить, 2-й элемент, пока 1-й уже наполовину готов, 3-й, а 2-й уже наполовину готов и т. Д.

Я знаю, что могу сделать что-то вроде этого:

$('#element1).fadeIn(1000);
$('#element2).delay(500).fadeIn(1000);
$('#element3).delay(500).fadeIn(1000);
etc.

Хотя цикл кажется более элегантным, и мой вопрос: почему следующий код не работает так, как я ожидал?

for (var i = 1; i <= 5; i++;) {
    $('#box' + i).fadeIn(2000).delay(500);
}

Я ожидал бы задержку между каждой итерацией цикла, но вместо этого вся анимация происходит синхронно.

Где я вижу это неправильно?

Answer 1

Каждый элемент имеет свою очередь эффектов.Для каждого элемента должно быть различное значение задержки:

for (var i = 0; i < 5; i++) {
    $('#box' + (i + 1)).delay(500 * i).fadeIn(1000);
}

http://jsfiddle.net/cDcU7/1/