JQuery在keydown时

Question

如何在用户“keydown”时进行元素的移动，然后如果他制作“keyup”来停止动画（移动），这是我现在的代码

$(document).ready(function(){

    function checkKey(e){
         switch (e.keyCode) {
            case 40:
                //alert('down');
                $('#cube').animate({top: "+=20px"})
                break;
            case 38:
                //alert('up');
                $('#cube').animate({top: "-=20px"})
                break;
            case 37:
                //alert('left');
                $('#cube').animate({left: "-=20px"})
                break;
            case 39:
                //alert('right');
                $('#cube').animate({left: "+=20px"})
                break;
            default:
                alert('???');  
                }      
    }

    if ($.browser.mozilla) {
        $(document).keydown (checkKey);
    } else {
        $(document).keydown (checkKey);
    }
})

我希望在用户按下键（向下，向左，向上，向右）而不是每次按下时移动立方体？

Answer 1

你在寻找吗？

$(document).on("keyup", function() {
    $("#cube").stop(true);
});

DEMO： http://jsfiddle.net/LjGRe/

Answer 2

您需要一个简单的2D引擎来设置游戏循环。

简单演示：http://jsfiddle.net/kzXek/

来源：https://github.com/superrob/simple-2D-javascript-engine/blob/master/simple2d.html

Answer 3

你可以改变checkKey函数，并将其添加到它：

   function checkKey(e){
          $(document).keyup(return);
         switch (e.keyCode) {
            case 40:
                //alert('down');
                $('#cube').animate({top: "+=20px"})
                break;
            case 38:
                //alert('up');
                $('#cube').animate({top: "-=20px"})
                break;
            case 37:
                //alert('left');
                $('#cube').animate({left: "-=20px"})
                break;
            case 39:
                //alert('right');
                $('#cube').animate({left: "+=20px"})
                break;
            default:
                alert('???');  
                }      
    }

Answer 4

我认为使用计时器处理动画效果会更好。

您只需在按下某个键时启动计时器，并在释放该键时将其停止。

这是一个处理多个按键的简单解决方案（可以对角移动）

var direction = {top:0,left:0},
    animator = null,
    cube = $("#cube");

function animate(){
    cube.css({
        top: '+=' + direction.top,
        left: '+=' + direction.left
    });
}
function setProperties(keyCode, unset){
        switch (keyCode) {
        case 40:
                direction.top = (unset)?0:2;
            break;
        case 38:
            direction.top = (unset)?0:-2;
            break;
        case 37:
            direction.left = (unset)?0:-2;
            break;
        case 39:
            direction.left = (unset)?0:2;
            break;
    }  
}
function setKey(e) {

    setProperties(e.keyCode);

    if (animator === null){
        animator = setInterval(animate, 10);
    }
}
function unsetKey(e){
    setProperties(e.keyCode, true);
    if (direction.top === 0 && direction.left === 0){
        clearTimeout(animator);
        animator = null;
    }
}

$(document)
    .on("keyup", unsetKey)
    .on('keydown', setKey);

演示 http://jsfiddle.net/gaby/Cu6nW/