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

Question

我正在构建我的第一个简单的手风琴类型的东西（没有任何网络 tuts），我拥有的 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一个布尔值，指示是否也删除排队的动画。默认为假。

如果由于 clearQueue 布尔值导致动画中途停止时遇到问题，您可以尝试stop(true, true)改用。

jumpToEnd一个布尔值，指示是否立即完成当前动画。默认为假。

Answer 2

尝试以下方法（未经测试，但您大致了解）：

if ($('#one').hasClass("extended")) {
        if ($('#one').data("inProgress")) return;
        $('#one').data("inProgress", true);
        $('#one').animate({height: '25px'},500);
        $('#one').removeClass("extended");
        $('#a1').animate({opacity: '1'},500);
        $('#one').data("inProgress", false);
      } else {
        if ($('#one').data("inProgress")) return;
        $('#one').data("inProgress", true);
        $('#one').animate({height: '120px'},500);
        $('#one').addClass("extended");
        $('#a1').animate({opacity: '0'},300);
        $('#one').data("inProgress", false);
      }