在slideUp啓動之後但在完成之前刪除類（回調）

Question

這是我在Jquery中查看的第一段代碼，並且遇到問題。 HTML在小提琴中。

問題

你會與效果基本show回調函數注意的是它會刪除活動類之前等待300秒什麼。所以如果你點擊一個面板，然後在0.3秒內點擊另一個面板，你將有2個面板展開，因爲點擊時有兩個活動類。有沒有辦法來解決這個問題？

的jsfiddle測試

通過點擊任何面板上，然後迅速在1秒內點擊另一面板上試驗它在此jsfiddle。

（很明顯，我可以減少需要向上滑動的時間，但目前我有它在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>