javascript - jQuery 添加/删除类或切换类

Question

我只是想知道使用 jquery 在 mouseenter/mouseleave 状态期间切换类或仅添加和删除类的最佳实践。两者似乎都可以正常工作，我只是不确定哪一个最好。

谢谢

  $('#image1').mouseenter(function() {
    $('#image1').toggleClass('transform');
    $('#image1 .images-color-overlay').toggleClass('transparent');
    $('#image1 .images-text').toggleClass('show-images-text');
  });

  $('#image1').mouseleave(function() {
    $('#image1').toggleClass('transform show-images-text');
    $('#image1 .images-color-overlay').toggleClass('transparent');
    $('#image1 .images-text').toggleClass('show-images-text');
  });

.images-color-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.images {
  width: 33.333%;
  float: left;
  overflow: hidden;
  position: relative;
}
#image1 {
  background-image: url("http://placehold.it/1000x320");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.images-text {
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: -20px;
  color: #fff;
  font-size: 10px;
  line-height: normal;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.show-images-text {
  -webkit-transition: all 1s;
  transition: all 1s;
  bottom: 20px;
}
.transform {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.transparent {
  background-color: rgba(0, 0, 0, 0) !important;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
  <div id="image1">
    <div class="images-color-overlay">
      <p class="images-text">hidden-text</p>
    </div>
  </div>
</div>

Answer 1

很多这种风格问题在 SO 上都被否决了，因为它似乎归结为偏好。但是 HERE 是一种无需 javascript，仅使用 CSS 即可完成所有操作的方法，有些人可能认为这种方法效率更高。

.images-color-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.images {
  width: 33.333%;
  float: left;
  overflow: hidden;
  position: relative;
}
#image1 {
  background-image: url("http://placehold.it/1000x320");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.images-text {
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: -20px;
  color: #fff;
  font-size: 10px;
  line-height: normal;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#image1:hover {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

#image1:hover .images-text {
  -webkit-transition: all 1s;
  transition: all 1s;
  bottom: 20px;
}

.images-color-overlay:hover {
  background-color: rgba(0, 0, 0, 0) !important;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
  <div id="image1">
    <div class="images-color-overlay">
      <p class="images-text">hidden-text</p>
    </div>
  </div>
</div>