在动画期间禁用keydown

时间:2010-09-27 18:32:37

标签: jquery binding javascript-events callback keydown

我正在使用以下代码使用户能够使用向上和向下箭头键显示或隐藏照片说明(#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打开,相互重叠。我正在寻找一种在第一个动画启动后基本解除绑定keydown函数的方法,并在完成后重新绑定keydown函数。我是一个jquery新手,所以也许这不是最好的方法。在动画过程中阻止其他函数触发的最简单方法是什么?

由于

2 个答案:

答案 0 :(得分:1)

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

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

我不记得在动画结束时有函数调用的语法,但它在jQuery的文档中

答案 1 :(得分:0)

抱歉,我有点困惑。你的答案的实现是否会像这样,或者我离开了?

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