Les onglets déroulants ne fonctionnent pas comme prévu

Question

J'ai créé des onglets personnalisés à l'aide de jQuery. La règle est qu'une fois que vous cliquez sur un onglet, il va glisser vers le bas du contenu avec fadeIn effet. Si vous cliquez sur un autre onglet, il ne sera pas slideUp, mais il affichera le contenu de l'onglet 2 avec fadeIn effet. Si vous cliquez de nouveau sur l'onglet 2 (qui est déjà ouvert), le conteneur de l'onglet va glisser vers le haut.

Cela fonctionne pour la première fois, mais si vous cliquez à nouveau sur le même onglet (après avoir glissé), il faut un certain temps pour glisser vers le bas, ce qui n'est pas aussi facile.

Qu'est-ce que je fais mal?

$(document).ready(function() { 
 

 
    $('.tabs .col-3 a').click(function(e) { // Or bind to any other event you like, or call manually 
 

 
     e.preventDefault(); 
 
     var hrefid = $(this).attr("href"); 
 
     var tabid = ($(this).attr("href")).replace('#', ''); // remove #   
 

 
     var getContent = $(hrefid).html(); 
 

 
     $('#maintabcontent').hide().html(getContent).fadeIn(1400); 
 

 

 
     $('span.plus').text("+"); 
 
     var $t = $('.tab-container'); 
 

 
     if ($(this).parent().hasClass('active')) { 
 
     $(this).find('span').text("+"); 
 
     $t.slideUp(function() { 
 
      $('#maintabcontent').html(''); 
 
     }); 
 
     $(this).parent().removeClass('active'); 
 
     } else { 
 

 
     $(this).find('span').text("-"); 
 
     $t.slideDown(600, function() { 
 

 
     }); 
 
     if ($t.is(':visible')) { 
 
      $('.col-3').removeClass('active'); 
 
      $(this).parent().addClass('active'); 
 
     } 
 
     } 
 

 
    }); 
 

 
    });

.container { 
 
    margin: 0 auto; 
 
    max-width: 1280px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.full-width { 
 
    background: #dfdedb none repeat scroll 0 0; 
 
    width: 100%; 
 
} 
 
.main-container { 
 
    margin: 0 auto; 
 
    max-width: 1220px; 
 
} 
 
.padding-top-bottom-small { 
 
    padding-bottom: 1rem; 
 
    padding-top: 1rem; 
 
} 
 
.text-center { 
 
    text-align: center; 
 
} 
 
.col-3 { 
 
    display: inline-block; 
 
    max-width: 403px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    vertical-align: top; 
 
    width: 32.5%; 
 
} 
 
.tabs .col-3 { 
 
    border-right: 2px solid #ffffff; 
 
    cursor: pointer; 
 
} 
 
.tab-container { 
 
    background: #505050 none repeat scroll 0 0; 
 
    display: none; 
 
    position: relative; 
 
} 
 
.main-container { 
 
    margin: 0 auto; 
 
    max-width: 1220px; 
 
} 
 
.padding-top-bottom-big { 
 
    padding-bottom: 2rem; 
 
    padding-top: 2rem; 
 
} 
 
.tab-content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="full-width container tabs"> 
 
    <div class="main-container"> 
 
    <div class="col-3 first text-center padding-top-bottom-small"> <a href="#tab-1"><h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3></a> 
 

 
    </div> 
 
    <div class="col-3 second text-center padding-top-bottom-small"> <a href="#tab-2"><h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3></a> 
 

 
    </div> 
 
    <div class="col-3 text-center padding-top-bottom-small"> <a href="#tab-3"><h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3></a> 
 

 
    </div> 
 
    </div> 
 
</div> 
 
<div class="tab-container"> 
 
    <div class="main-container padding-top-bottom-big" id="maintabcontent"></div> 
 
</div> 
 
<div id="tab-1" class="tab-content">Tab Content 1</div> 
 
<div id="tab-2" class="tab-content">Tab Content 2</div> 
 
<div id="tab-3" class="tab-content">Tab Content 3</div>

View on JSFiddle

Answer 1

Ajouter stop() avant fadeIn():

$('#maintabcontent').hide().html(getContent).stop().fadeIn(1400); 

qui arrêtera les animations en cours d'exécution et d'éviter les saccades que vous rencontrez.

Updated Fiddle