2

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

});

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

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

4

2 回答 2

1

试试Callback，这个功能会让一个函数在执行之前等待另一个函数完成。

代码是这样的：

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

}
于 2013-07-01T00:37:23.347 回答
0

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

同时，不要为事件处理程序使用匿名函数，然后调用命名的firstFlipand 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);

});
于 2013-07-01T01:01:07.193 回答