Question

我正在构建我的第一个简单的手风琴类型的东西（没有任何净tuts），我有的是这个：

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 一个布尔值，指示是否也要删除排队的动画。默认为false。

如果你因为clearQueue bool而动画停止一半，你可以尝试使用stop(true, true)代替。

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

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);
      }

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

2 个答案: