jQuery添加/删除类或切换类

Question

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

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

Well a lot of this style question get shot down here on SO, because it seems it comes 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.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 3

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