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

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

});

感谢我在这件事上能得到的任何帮助!

编辑:为清楚起见，我现在可以淡入淡出分离，但我需要有关如何延迟将点击重新绑定(bind)到翻转功能的帮助(以避免动画堆叠队列连续多次点击)。

Answer 1

尝试 Callback ，一项功能将使一个函数在执行之前等待另一个函数完成。

代码是这样的:

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

}