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

Question

这是我在 Jquery 中看到的第一段代码，我遇到了一个问题。 HTML 在 fiddle.

问题

您会注意到 slideup 回调函数会等待 300 秒，然后才会删除活动 class。因此，如果您单击一个面板，然后在 0.3 秒内单击另一个面板，您将展开 2 个面板，因为在单击时有 2 个活动 classes。有办法解决这个问题吗？

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>

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

Remove class after slideUp initiates but before it finishes (callbacks)

jquery

callback