javascript - 防止jquery slider 被点击一百次= 100个动画

Question

我正在构建我的第一个简单的 Accordion 类型的东西(没有任何网络图)，我拥有的js是这样的:

jQuery(document).ready(function($){

    $('#one').css("height", "25");
    $('#dtwo').css("height", "25"); 
    $('#three').css("height", "25");   
        $('#one').click(function() {
          if ($('#one').hasClass("extended")) {
            $('#one').animate({height: '25px'},500);
            $('#one').removeClass("extended");
            $('#a1').animate({opacity: '1'},500);
          } else {
            $('#one').animate({height: '120px'},500);
            $('#one').addClass("extended");
            $('#a1').animate({opacity: '0'},300);
          }
    });
});

效果很好。

但是，您可以点击它 200 次，它也会执行 200 次，我该如何防止这种情况发生？

Answer 1

如果您正在谈论动画排队，您可以使用 stop()方法。像这样的事情:

$('#a1').stop(true).animate({opacity: '1'},500);

传递 true 作为第一个参数将清除队列。

clearQueue A Boolean indicating whether to remove queued animation as well. Defaults to false.

如果您遇到由于clearQueue bool 导致动画中途停止的问题，您可以尝试使用 stop(true, true) 来代替。

jumpToEnd A Boolean indicating whether to complete the current animation immediately. Defaults to false.