在动画期间禁用 keydown

Question

我正在使用以下代码使用户能够使用向上和向下箭头键显示或隐藏照片描述 (#photoinfo) 和菜单 (.slidetable)。如果这两个 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 打开，相互重叠。我正在寻找一种在第一个动画启动后基本上取消绑定keydown 函数的方法，并在它完成后重新绑定keydown 函数。我是 jQuery 新手，所以也许这不是最好的方法。在动画期间防止其他功能触发的最简单方法是什么？

Answer 1

您可以在触发动画之前将布尔值 (isAnimating) 设置为 true，并在动画完成后将其设置为 false。在 keydown 的顶部只需说

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