|
Сообщение от рони
|
|
выкиньте цикл и запускайте следущую "анимацию" по окончанию предыдущей. гуглить transitionend
|
Цикл здесь очень необходим.
Я наверное как-то криво изъясняюсь. Попробую объяснить все пошагово.
1)Есть большое поле с дивами(у каждого свои размеры и каждый занимает свою позицию в пространстве + каждый див имеет класс picture1);
2)Ждем 2сек (- это время первой задержки, во время нее ничего не происходит)
3) Первому диву данного блока прискаевается классы с анимацией .toggleClass('animated flip') ( время анимации я задаю через CSS свойства, допустим 1,5сек) + класс picture1 заменяется picture2 только у этого дива
4) Первый див меняет свои размеры (высота=ширине, ширина=высоте)
5) Первый (уже измененный) див меняет свое положение в пространстве.
#bigBlock .picture2:nth-child(1) {
top: 36%;
left: 57%;
}
6) С первого класса удаляются классы анимации .toggleClass('animated flip')
7) пункты 3-6 проделываются по очереди с каждым дивом до i<$('#bigBlock div').length;
8) Все дивы заняли новые позиции, и у них всех есть класс picture2 . Ждем 2сек.
9)Идет повтор от 3 - 6 для каждого дива .
10) Все дивы заняли новые позиции, и у них всех есть класс picture3 . Ждем 2сек.
11) Цикл продолжается пока не доходит picture N
12) Цикл идет с picture N в picture 1
