jQuery card animation on hover

Question

When hovering on one of the cards, the rest of the cards should properly decrement the size one by one - hover on card 1 for example.

Currently my solution for this was to add and remove classes one by one, but I'd like to know if there's a better way to get it done using jQuery.

$(".card").mouseover(function() {
  $(".card").removeClass('active');
  $(this).addClass('active');
});

$(".card").mouseout(function() {
  $(".card").removeClass('active');
  $(".c").addClass('active');
});

$(".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 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}

.container .card {
  background-color: red;
  color: #fff;
  width: 100px;
  height: 150px;
  text-align: center;
  display: inline-block;
  transition: 0.2s;
}

.container .card.active {
  transform: scale(1.4, 1.4);
  position: relative;
  z-index: 100;
}

.container .card.a {
  background-color: black;
}

.container .card.b {
  background-color: blue;
  width: 120px;
  height: 170px;
}

.container .card.c {
  background-color: red;
}

.container .card.d {
  background-color: orange;
  width: 120px;
  height: 170px;
}

.container .card.e {
  background-color: yellow;
}

.container .card.size1 {
  transform: scale(1.1, 1.1);
  z-index: 1;
}

.container .card.size2 {
  transform: scale(1.15, 1.15);
  z-index: -1;
}

.container .card.size3 {
  transform: scale(0.9);
  z-index: -2;
}

.container .card.size4 {
  transform: scale(0.8);
  z-index: -3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
  <div class="card a"><p>Card 1</p></div>
  <div class="card b"><p>Card 2</p></div>
  <div class="card c active"><p>Card 3</p></div>
  <div class="card d"><p>Card 4</p></div>
  <div class="card e"><p>Card 5</p></div>
</div>

jsFiddle

Answer 1

You can use a switch statement and arrays that contain the different classes to be toggle for each case:

const arr1 = ['b', 'c', 'd', 'e'];
const arr2 = ['a', 'c', 'd', 'e'];
const arr3 = ['a', 'b', 'd', 'e'];
const arr4 = ['a', 'b', 'c', 'e'];
const arr5 = ['a', 'b', 'c', 'd'];
var l = arr1.length;

$(".card").mouseover(function() {
  $(".card").removeClass('active');
  
  switch($(this).attr('class')){
  case 'card a':
    for(var i=0;i<l;i++){$("." + arr1[i]).addClass('size' + i)}
    break;
  case 'card b':
    for(var i=0;i<l;i++){$("." + arr2[i]).addClass('size' + i)}
    break;
  case 'card c':
    for(var i=0;i<l;i++){$("." + arr3[i]).addClass('size' + i)}
    break;
  case 'card d':
    for(var i=0;i<l;i++){$("." + arr4[i]).addClass('size' + i)}
    break;
  case 'card e':
    for(var i=0;i<l;i++){$("." + arr5[i]).addClass('size' + i)}
    break;
  }
  $(this).addClass('active');
});

$(".card").mouseout(function() {
  $(".card").removeClass('active');
  
  switch($(this).attr('class')) {
  case 'card a':
    for(var i=0;i<l;i++){$("." + arr1[i]).removeClass('size' + i)}
    break;
  case 'card b':
    for(var i=0;i<l;i++){$("." + arr2[i]).removeClass('size' + i)}
    break;
  case 'card c':
    for(var i=0;i<l;i++){$("." + arr3[i]).removeClass('size' + i)}
    break;
  case 'card d':
    for(var i=0;i<l;i++){$("." + arr4[i]).removeClass('size' + i)}
    break;
  case 'card e':
    for(var i=0;i<l;i++){$("." + arr5[i]).removeClass('size' + i)}
    break;
  }
   $(".c").addClass('active'); 
});

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}

.container .card {
  background-color: red;
  color: #fff;
  width: 100px;
  height: 150px;
  text-align: center;
  display: inline-block;
  transition: 0.2s;
}

.container .card.active {
  transform: scale(1.4, 1.4);
  position: relative;
  z-index: 100;
}

.container .card.a {
  background-color: black;
}

.container .card.b {
  background-color: blue;
  width: 120px;
  height: 170px;
}

.container .card.c {
  background-color: red;
}

.container .card.d {
  background-color: orange;
  width: 120px;
  height: 170px;
}

.container .card.e {
  background-color: yellow;
}

.container .card.size0 {
  transform: scale(1.1, 1.1);
  z-index: 1;
}

.container .card.size1 {
  transform: scale(1.15, 1.15);
  z-index: -1;
}

.container .card.size2 {
  transform: scale(0.9);
  z-index: -2;
}

.container .card.size3 {
  transform: scale(0.8);
  z-index: -3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
  <div class="card a"><p>Card 0</p></div>
  <div class="card b"><p>Card 1</p></div>
  <div class="card c active"><p>Card 2</p></div>
  <div class="card d"><p>Card 3</p></div>
  <div class="card e"><p>Card 4</p></div>
</div>