向下滑動標籤不按預期方式工作

Question

我使用jQuery製作了一個基於自定義的標籤。規則是，一旦你點擊一個標籤，它就會向下滑動內容，具有fadeIn效果。如果您點擊另一個標籤，那麼它不會slideUp，而是會顯示標籤2中的內容與fadeIn效果。如果再次單擊標籤2（已打開），則標籤容器將向上滑動。

它第一次工作，但如果您再次單擊相同的選項卡（滑動後），則需要一些時間才能向下滑動，這也不平滑。

我在做什麼錯？

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

添加stop()前fadeIn()：

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

這將停止所有正在運行的動畫，並防止您遇到圖像跳動。

Updated Fiddle