下拉选项卡无法按预期工作

Question

我使用 jQuery 创建了一个基于自定义的选项卡。规则是，一旦您单击一个选项卡，它就会以 fadeIn 效果向下滑动内容。如果您单击另一个选项卡，则它不会 slideUp，而是会显示具有 fadeIn 效果的选项卡 2 中的内容。如果你再次点击tab 2（已经打开），那么tab容器会向上滑动。

第一次使用，但是如果你再次点击同一个标签（向上滑动后），那么向下滑动需要一些时间，而且不流畅。

我做错了什么？

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

在fadeIn()之前添加stop():

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

这将停止任何运行动画并防止您遇到的抖动。

Updated Fiddle

下拉选项卡无法按预期工作

Slide-down tabs not working as expected

jquery

tabs

slidedown