Анимация карточки jQuery при наведении ⇐ Jquery

[Anonymous]

При наведении курсора на одну из карточек остальные карточки должны корректно уменьшать размер одна за другой — например, наведите курсор на карточку 1.

На данный момент моим решением было добавлять и удалять классы один за другим, но мне хотелось бы знать, есть ли лучший способ сделать это с помощью jQuery.

$(".card").mouseover(function() { $(".card").removeClass('активный'); $(this).addClass('активный'); }); $(".card").mouseout(function() { $(".card").removeClass('активный'); $(".c").addClass('активный'); }); $(".a").mouseover(function() { $(".b").addClass('size1'); $(".c").addClass('size2'); $(".d").addClass('size3'); $(".e").addClass('size4'); }); $(".a").mouseout(function() { $(".b").removeClass('size1'); $(".c").removeClass('size2'); $(".d").removeClass('size3'); $(".e").removeClass('size4'); }); $(".b").mouseover(function() { $(".c").addClass('size1'); $(".d").addClass('size2'); $(".e").addClass('size3'); }); $(".b").mouseout(function() { $(".c").removeClass('size1'); $(".d").removeClass('size2'); $(".e").removeClass('size3'); }); .container { дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; маржа сверху: 100 пикселей; } .контейнер .карта { цвет фона: красный; цвет: #fff; ширина: 100 пикселей; высота: 150 пикселей; выравнивание текста: по центру; отображение: встроенный блок; переход: 0,2 с; } .container .card.active { преобразование: масштаб (1,4, 1,4); положение: относительное; z-индекс: 100; } .container .card.a { цвет фона: черный; } .container .card.b { цвет фона: синий; ширина: 120 пикселей; высота: 170 пикселей; } .container .card.c { цвет фона: красный; } .container .card.d { цвет фона: оранжевый; ширина: 120 пикселей; высота: 170 пикселей; } .container .card.e { цвет фона: желтый; } .container .card.size1 { преобразование: масштаб (1.1, 1.1); z-индекс: 1; } .container .card.size2 { преобразование: масштаб (1,15, 1,15); z-индекс: -1; } .container .card.size3 { преобразование: масштаб (0,9); z-индекс: -2; } .container .card.size4 { преобразование: масштаб (0,8); z-индекс: -3; Карточка 1

Карточка 2

Карточка 3

Карточка 4

Карточка 5

jsFiddle