jQuery实现卡片悬停缩放动画 如何优化逐次操作类的冗余代码

核心优化思路 #

原代码为每个卡片单独绑定事件冗余度较高，优化后仅需统一给所有.card绑定事件，通过计算卡片之间的索引差绝对值，动态为其余卡片添加对应size类即可，后续新增卡片也不需要额外修改JS代码，可自动适配。

优化后代码 #

JavaScript 代码 #

// 统一绑定悬停事件
$(".card").mouseover(function() {
  // 清空所有卡片的active和size类
  $(".card").removeClass('active size1 size2 size3 size4');
  const $hoverCard = $(this);
  // 当前悬停卡片添加active类
  $hoverCard.addClass('active');
  // 获取当前悬停卡片的索引
  const hoverIndex = $hoverCard.index();
  // 遍历所有卡片计算距离
  $(".card").each(function() {
    const currentIndex = $(this).index();
    const distance = Math.abs(currentIndex - hoverIndex);
    // 按距离添加对应size类
    if (distance > 0 && distance <=4) {
      $(this).addClass(`size${distance}`);
    }
  });
});

// 鼠标移出恢复默认状态
$(".card").mouseout(function() {
  $(".card").removeClass('active size1 size2 size3 size4');
  $(".c").addClass('active');
});

CSS 代码（无需修改，和原有实现一致） #

.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;
}

HTML 代码（无需修改，和原有实现一致） #

<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>

优化效果说明 #

• 代码量大幅缩减，无重复的事件绑定逻辑
• 扩展性更强，后续新增卡片仅需提前定义对应距离的size类即可自动生效
• 功能和原有实现完全一致，鼠标悬停时其余卡片会根据距离自动应用对应缩放等级

内容的提问来源于stack exchange，提问作者Rick Cannon