slideUp启动后但在完成之前删除类（回调）

Question

这是我在Jquery看过的第一段代码，我遇到了一个问题。 HTML就是小提琴。

问题

您在滑动回调功能中注意到的是它会在删除活动类之前等待300秒。因此，如果您单击一个面板，然后在0.3秒内单击另一个面板，您将展开2个面板，因为在单击时有2个活动类。有办法解决这个问题吗？

JSfiddle测试

点击任意面板，在jsfiddle中对其进行测试，然后在1秒内快速点击另一个面板。

（显然我可以减少上滑所需的时间，但目前我已经达到了0.3秒而且我不想让它破坏，因为有人快速点击它......）

$(function(){
    $(".tab-panels .tabs li").on("click", function(){
        //show panel with class="active"
        var panelToShow = $(this).attr("rel");
        $(".tab-panels .panel.active").slideUp(300, function(){
            $(this).removeClass("active", function(){
                $("#"+panelToShow).slideDown(300, function() {
                $(this).addClass("active");
            });

            });
        });
    });
});

Answer 1

您可以停止上一个动画并尝试

$(function() {
  $(".tab-panels .tabs li").on("click", function() {
    //show panel with class="active"
    var panelToShow = $(this).attr("rel");
    $(".tab-panels .panel.active").stop().slideUp(1000, function() {
      $(this).removeClass("active");
      $("#" + panelToShow).slideDown(1000, function() {
        $(this).addClass("active");
      });
    });
  });
});

.tab-panels ul li {
  list-style: none;
  display: inline-block;
  background: #999;
  margin: 0;
  padding: 3px 10px;
  border-radius: 10px 10px 0 0;
  color: #fff;
}
.tab-panels ul {
  margin: 0;
  padding: 0;
}
.tab-panels ul li:hover {
  color: #fff;
  background: #666;
}
.tab-panels ul li.active {
  color: #fff;
  background: #666;
}
.tab-panels .panel {
  display: none;
  background: #c9c9c9;
  padding: 30px;
  border-radius: 0 0 10px 10px;
  width: 222px;
}
.tab-panels .panel {
  display: none;
}
.tab-panels .panel.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tab-panels">
  <ul class="tabs">
    <li rel="panel1">Panel 1</li>
    <li rel="panel2">Panel 2</li>
    <li rel="panel3">Panel 3</li>
    <li rel="panel4">Panel 4</li>
  </ul>
  <div id="panel1" class="panel active">
    <p>Content 1</p>
  </div>
  <div id="panel2" class="panel" )>
    <p>Content 2</p>
  </div>
  <div id="panel3" class="panel">
    <p>Content 3</p>
  </div>
  <div id="panel4" class="panel">
    <p>Content 4</p>
  </div>
</div>