javascript - jQuery addremove class or toggle class

Im just curious to know the best practice for either toggling a class or just adding and removing it during a mouseenter/mouseleave state using jquery. Both seem to work fine im just not to sure which is best to go with.

Thank you

  $('#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("");
  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=".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>

Thank you

  $('#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./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>

Share Improve this question asked Feb 13, 2017 at 11:02 rufus 8572 gold badges11 silver badges29 bronze badges

1 Rory's answer is very good. But as of using toggleClass vs add and remove, it depends on the initial state of your class and the desired oute. Toggle will switch it on and off regardless of what you want. So you need to make sure there's no other code that toggles the class (and keep it changed). And make sure the initial state is always what you expect it to be. In the rare case that you can't make sure. Its better to use remove and add instead. – Maher Fattouh Commented Feb 13, 2017 at 11:58

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

Your code is technically fine, however you can shorten it to just use the hover() method, as the function you provide will be called for both mouseenter and mouseleave events.

You can also use the this reference in the function to save DOM accesses, and also cache the jQuery object created from $(this) in a variable for re-use. Try this:

$('#image1').hover(function() {
  var $image = $(this).toggleClass('transform');
  $image.find('.images-color-overlay').toggleClass('transparent');
  $image.find('.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./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>

Well a lot of this style question get shot down here on SO, because it seems it es down to preference. But HERE is a way to do it all without javascript, only CSS, which some might consider more efficient.

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

The toggleClass is the bast practice in your case.

Internally it's also doing same thing if the class exist then remove it and if not then add it. See it yourself , goto this github link and search for toggleClass.

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jQuery addremove class or toggle class - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)