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

您的代码在技术上很好，但是您可以将其缩短为仅使用hover()方法，因为您提供的功能将针对mouseenter和mouseleave事件进行调用。

您还可以使用函数中的this引用来保存DOM访问，并将从$(this)创建的jQuery对象缓存到变量中以供重用。试试这个：

＆＃13;

$('#image1').hover(function() {
  var $image = $(this).toggleClass('transform');
  $image.find('.images-color-overlay').toggleClass('transparent');
  $image.find('.images-text').toggleClass('show-images-text');
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

很多这种风格问题都在SO上被击落，因为它似乎归结为偏好。但HERE是一种在没有javascript的情况下完成所有操作的方法，只有CSS，有些人可能会认为它更有效。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

toggleClass是您案件中的韧性练习。

在内部，如果该类存在，它也会做同样的事情，然后将其删除，如果没有，则添加它。自己查看，转到github link并搜索toggleClass。

// Check each className given, space separated list
if (self.hasClass(className)) {
  self.removeClass(className);
} else {
  self.addClass(className);
}

jQuery添加/删除类或切换类

3 个答案: