Question

我仍然是JQuery的新手，我对如何解决以下问题感到困惑。我想暂时禁用两个翻转功能（响应点击事件），直到淡入淡出动画结束。

使用下面的内容，功能在动画播放时仍会运行，因此两个div（卡背和卡片内容）同时显示。

$(document).ready(function(){

  $("#card-back").hide();
  $(".flip-back").hide();

  function firstflip(){
    $(".flip-back").show();
    $(".flip").hide();
    $("#card-content").fadeToggle("fast");
    $("#card-back").delay(300).fadeToggle("fast");
  }

  function secondflip(){
    $(".flip-back").hide();
    $(".flip").show();
    $("#card-back").fadeToggle("fast");
    $("#card-content").delay(300).fadeToggle("fast");
  }

  $(".flip").click(function(){
    $(".flip-back").unbind("click");
    firstflip();
    setTimeout(function(){
      $(".flip-back").bind("click",secondflip);
    },2000);
  });

  $(".flip-back").click(function(){
    $(".flip").unbind("click");
    secondflip();
    setTimeout(function(){
      $(".flip").bind("click",firstflip);
    },2000);
  });

});

感谢我能帮助解决这个问题！

编辑：为了清楚起见，我现在对淡入淡出分离感到满意，但我需要帮助来解决如何延迟点击重新绑定到翻转功能（以避免动画堆叠队列）连续多次点击）。

Answer 1

尝试使用Callback功能，该功能会使某个功能在执行前等待其他功能完成。

代码是这样的：

function firstflip(){
    $(".flip-back").show();
    $(".flip").hide();
    $("#card-content").fadeToggle("fast",function(){
         $("#card-back").delay(300).fadeToggle("fast");
    });

}

Answer 2

在绑定新事件处理程序（使用setTimeout）之前，您可以将回调传递给动态完成后执行的the fadeToggle function，而不是任意延迟。这可用于显示新的点击目标（我假设是某种按钮）并将事件绑定到它。

与此同时，不是为事件处理程序使用匿名函数，然后调用命名的firstFlip和secondFlip，只需将所有逻辑放在命名函数中，并将它们作为事件处理程序传递。（你似乎是在重新绑定时这样做，但在第一次这样做的时候却没有。）

在下面编辑的代码中查看已更改内容的注释：

$(document).ready(function(){

  $("#card-back").hide();
  $(".flip-back").hide();

  function firstflip(){
    // Hide button and remove this click event until next flip completes
    $(".flip").unbind('click').hide();
    $("#card-content").fadeToggle("fast");
    $("#card-back").delay(300).fadeToggle("fast", function(){
       // Once fully displayed, show button and bind next click handler
       $(".flip-back").show().bind("click",secondflip);
    });
  }

  function secondflip(){
    // Hide button and remove this click event until next flip completes
    $(".flip-back").unbind('click').hide();
    $("#card-back").fadeToggle("fast");
    $("#card-content").delay(300).fadeToggle("fast", function(){
       // Once fully displayed, show button and bind next click handler
       $(".flip").show().bind("click",firstflip);
    });
  }

  // Bind initial event (no need to bind secondflip yet, as firstflip will remove it anyway)
  $(".flip").bind("click",firstflip);

});

如何在动画运行时暂时禁用JQuery单击处理程序？

2 个答案: