Действие по време на jQuery анимация

Здравейте! Моля, кажете ми най-добрия начин да го направя. Има въртележка, която в този случай трябва да превърта 500px. Видимостта е ограничена от първите 5 елемента, като централния е 300*300, следващите и предходните от него са 200*200, всички останали са 100*100. Централният е с голям клас, отстрани на централния среден. Необходимо е при превъртане класовете също да преминават към следващите елементи, сега това работи, но със закъснение, тъй като присвояването на класове става след анимацията. Как да направите присвояването на класове на следните елементи по време на анимацията?

Ето частта от кода, където това се случва:

Можете да използвате css анимация за увеличаване / намаляване на размера, чиято скорост ще съответства на скоростта на пълната js анимация. Ето пример за анимация. обърнете внимание на линията

преход: ширина 1s линеен, височина 1s линеен;

Скоростта на анимацията е посочена в секунди. И в js просто променям класа. Тоест, не е нужно да го правите в цикъл. Просто променяте класовете за елементите и стартирате анимацията на въртележката. Всичко трябва да се нареди по най-добрия начин.

Има и друг по-труден вариант. Функцията js animate има параметър стъпка, това е функцията, отговорна за едно кликване на анимацията. Ето един пример от документа:

Тоест можете да напишете тук всички промени, които трябва да се случат с вашия блок. Е, има изместване наляво / надясно и, добре, хобита / намаления на някои елементи. И в края на анимацията сменете класовете.

---