摳像效果，如果在效果完成之前進行摳像會發出警報

Question

我的目標：在效果發生時按住空格鍵（以模擬指紋掃描）。 如果用戶在效果完成之前釋放鍵，我想顯示一條確認消息。 keydown部分可以正常工作，並可以進行“過程”功能，但是如果在效果完成之前釋放它，則keyup上不會顯示任何錯誤消息。 這就是我所擁有的...

var active = false;

$(document).one("keydown", function(e) {
    if ((e.keyCode == 32) && (active == false)) {
      active = true;
      $(".panel_1").slideDown(5000, function() {
        active = false;
        $(".panel_1").slideUp(2000, function() {process(); })
      }); 
    }
});

$(document).one("keyup",function(e) {
    if ((e.keyCode == 32) && (active == true)) {
      var r=confirm("Oops! You must HOLD down the space key until scan is complete. Press OK to try again, or Cancel to return to homepage.");
      if (r==true) {
        reset();
      }
      else {
        window.location.replace("home.html");
      } 
    }
});

Answer 1

驗證在第一個slideDown動畫過程中釋放了關鍵幀。 根據您的代碼，一旦它開始向上滑動，您的活動對象將被設置為false，然后使其變為false，從而不會觸發keyup事件。

另外，我建議在JavaScript中使用Triple =。

Answer 2

您的代碼似乎可以在這里工作： http : //jsfiddle.net/D52eq/，但是請注意，只有在效果的.slideDown()階段釋放空格鍵時才會出現確認消息-您將active = false;設置active = false; 在 .slideUp()調用之前。

如果要在完成整個動畫和process()調用之前確認是否釋放空格鍵，請嘗試以下操作：

$(document).one("keydown", function(e) {
    if ((e.keyCode == 32) && (!active)) {
      active = true;
      $(".panel_1").slideDown(5000).slideUp(2000, function() {
         process();
         active = false;
      })
    }
});

請注意，然后您可以只鏈接.slideDown()和.slideUp() ，而無需為.slideDown()提供回調函數。 我也用!active替換了active == false 。

演示： http ： //jsfiddle.net/D52eq/1/