在动画中禁用按键

Question

我正在使用下面的代码来让用户显示或隐藏照片描述 (#photoinfo)和一个菜单(.slidetable)使用向上和向下的方向键。如果这两个div中的一个已经打开了，按相反的箭头就会在打开另一个div之前关闭该div。

$(document).unbind('keypress');
$(document).keydown(function(event) {
    switch (event.keyCode) {
    case 38:
        if ($('#photoinfo').is(".open")) {
            closeInfo();
        }
        else if ($('.slidetable').is(".open")) {
            closeSlide2();
            openInfo();
        }
        else {
            openInfo();
        }
        break;
    case 40:
        if ($('.slidetable').is(".open")) {
            closeSlide();
        }
        else if ($('#photoinfo').is(".open")) {
            closeInfo();
            openSlide();
        }
        else {
            openSlide();
        }
        break;
    }
    return false;
});​

这似乎是可行的，唯一的问题是，如果两个箭头同时按下，或者一个接一个，两个div都会打开，相互重叠。我正在寻找一种方法来从本质上解除对DIV的约束。keydown 函数，并在第一个动画启动后重新绑定了 keydown 函数完成后。我是个jQuery新手，所以可能这不是最好的方法。有什么最简单的方法可以防止另一个函数在动画过程中被触发？

Answer 1

你可以在发射动画之前将一个布尔值(isAnimating)设置为true，一旦动画完成就将其设置为false。在下键的顶部，只要说

if(isAnimating)
{
  event.preventDefault();
  return false;
}

我不记得在动画结束时调用函数的语法了，但在jQuery的文档中是这样的

Answer 2

对不起，我有点糊涂了。你的答案的实现是这样的，还是我说的不对？

$(document).unbind('keypress'); 
$(document).keydown(function(event) {
            if(isAnimating)
            {
              event.preventDefault();
              return false;
            }

            switch (event.keyCode) {

                case 38: var isAnimating = true; 

                        if ($('#photoinfo').is(".open")) {
                            closeInfo();

                        }

                        else if ($('.slidetable').is(".open")) {
                            closeSlide2();
                            openInfo();

                        }

                        else {
                            openInfo();


                        } break;


                case 40: var isAnimating = true;
                        if ($('.slidetable').is(".open")) {
                              closeSlide();

                        }

                        else if ($('#photoinfo').is(".open")) {
                            closeInfo();
                            openSlide();

                        }

                        else {
                            openSlide();

                        } break;    

            }
            var isAnimating = false;                                
            return false;
});