如何讓動畫在不被中斷的情況下完成？

Question

我遇到了jQuery和switchclass函數的問題。我正在使用serialscroll函數來導航我的網站，併爲此綁定了箭頭鍵。我已經綁定了向下箭頭鍵來通過類之間的動畫來選擇/取消選擇元素。然而，我遇到的問題是，如果用戶在按下向下箭頭後快速向左或向右按​​下，則不允許動畫完成並卡住。

function mainselect() 
     { 

     setTimeout(function() 
      { 

      $(".selectstyle").switchClass("selectstyle", "select", 200); 
      $(".select").switchClass("select", "selectstyle", 200); 
      $(".maincontentshrink").switchClass("maincontentshrink", "maincontent", 200); 
      $(".maincontent").switchClass("maincontent", "maincontentshrink", 200); 
      return false; 
      }, 
      250); 

     } 
$(document).keydown(function(e)      //keyboard bind 
    { 
    if(e.keyCode == 39)      //right (->) 
     { 
     setTimeout(function() 
      { 
    //  $(".maincontent").switchClass("maincontent", "maincontent", 200); 
      $(".maincontentshrink").switchClass("maincontentshrink", "maincontent", 200); 
      $(".selectstyle").switchClass("selectstyle", "select", 200); 
      $pane.trigger('next'); 
      return false; 
      }, 
      200); 
     } 
    }); 


$(document).keydown(function(e) 
    { 
    if(e.keyCode == 37)      //left (<-) 
     { 
     setTimeout(function() 
      { 
    //  $(".maincontent").switchClass("maincontent", "maincontent", 200); 
      $(".maincontentshrink").switchClass("maincontentshrink", "maincontent", 200); 
      $(".selectstyle").switchClass("selectstyle", "select", 200); 
      $pane.trigger('prev'); 
      }, 
      200); 
    } 
    }); 

$(document).keydown(function(e) 
    { 
    if(e.keyCode == 40)      //down (\/) 
     { 
     mainselect() 

     } 
    }); 

有沒有辦法可以禁用其他功能或解除/綁定按鍵，直到動畫完成？

Answer 1

您可以使用隊列。

看看jquery docs

的示例的例子中是很清楚的。