给定慢速参数时，jquery隐藏和显示方法无法正常工作

Question

What i want to achieve is, when i click one of the three tabs, it should fade in a description div on the clicked div, and hide it on the other divs(the description div has the same class)

now, if i use .show() and .hide() without a parameter(example .hide("slow")), it works perfectly, and if i click the active description div, nothing happens(as expected). while if i use .hide("slow") and .show("slow"), or instead of "slow" i use millisecond parameter(1000), it fades in and fades out just like it should, but if i click on an active description div, it will fade out and fade in back again, which i don't want it to happen. JS fiddle below for reference.

https://jsfiddle.net/k00s1fek/

Answer 1

Just add a simple check to see if the current selector has a div with display : none . Below is the JavaScript code needed.

$('.col-lg-2').click(function() {

  if ($(this).children('.desc').css("display") == "none") {
    $('.desc').not(this).hide("slow");
    $('.desc', this).show("slow");
  }

})

Answer 2

This works fine, hope it helps:

$('.col-lg-2').click(function(){
     var current = $(this).find(".desc")
     $(current).show("slow");
     $(".desc").not(current).hide("slow");
})

Answer 3

You can do it like this

 $('.col-lg-2').click(function(){ if(!$(this).hasClass('active')){ $('.col-lg-2').not(this).removeClass('active').find('.desc').hide('slow'); $(this).addClass('active').find('.desc').show('slow'); } }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-4 col-lg-2" data-toggle="popover" title="" data-content=" Një filxhan çaji cool nga Electronic Beats. " data-original-title=" Filxhan caji " data-trigger="focus" tabindex="0" role="button" data-placement="top"> <div style="background-color:#d0d0d0;"><img src="https://i.imgur.com/XQeCxxh.png"> </div><div style="position: absolute; background-color: rgb(226, 0, 116); color: white; top: 0px; text-align: center; margin: 0px; right: 10px; left: 10px;" class="desc"> a stupid bag </div> </div> <div class="col-xs-4 col-lg-2" data-toggle="popover" title="" data-content="Some content inside the popover" data-original-title=""> <div style="background-color:#d0d0d0;"><img src="https://i.imgur.com/QJOzklY.png"> </div><div style="position: absolute; background-color: rgb(216, 0, 116); color: white; top: 0px; text-align: center; margin: 0px; right: 10px; left: 10px; line-height: 18px; display: none;" class="desc">laka laka lagu iku miku dhe taku ke shpia lakut noren 2 e gjys tdarkes </div> </div> <div class="col-xs-4 col-lg-2"> <div style="background-color:#d0d0d0;"><img src="https://i.imgur.com/6gAPzHW.png"> </div><div class="desc" style="position: absolute; background-color: rgb(216, 0, 116); color: white; top: 0px; text-align: center; margin: 0px; right: 10px; left: 10px; display: none;"> a stupid bag </div></div> 

Answer 4

 $('.col-lg-2').click(function(){ $('.desc').not($(this).find('.desc')).hide(); $(this).find('.desc').show("slow"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-4 col-lg-2" data-toggle="popover" title="" data-content=" Një filxhan çaji cool nga Electronic Beats. " data-original-title=" Filxhan caji " data-trigger="focus" tabindex="0" role="button" data-placement="top"> <div style="background-color:#d0d0d0;"><img src="https://i.imgur.com/XQeCxxh.png"> </div><div style="position: absolute; background-color: rgb(226, 0, 116); color: white; top: 0px; text-align: center; margin: 0px; right: 10px; left: 10px;" class="desc">first tab </div> </div> <div class="col-xs-4 col-lg-2" data-toggle="popover" title="" data-content="Some content inside the popover" data-original-title=""> <div style="background-color:#d0d0d0;"><img src="https://i.imgur.com/QJOzklY.png"> </div><div style="position: absolute; background-color: rgb(216, 0, 116); color: white; top: 0px; text-align: center; margin: 0px; right: 10px; left: 10px; line-height: 18px; display: none;" class="desc">second tab </div> </div> <div class="col-xs-4 col-lg-2"> <div style="background-color:#d0d0d0;"><img src="https://i.imgur.com/6gAPzHW.png"> </div><div class="desc" style="position: absolute; background-color: rgb(216, 0, 116); color: white; top: 0px; text-align: center; margin: 0px; right: 10px; left: 10px; display: none;"> third tab </div> </div> </div> 

First hide .desc div and then show current div desc

$('.col-lg-2').click(function(){
  $('.desc').not($(this).find('.desc')).hide();
  $(this).find('.desc').show("slow");
})