javascript - jQuery 使用箭头键移动 div

Question

我正在尝试使用箭头键移动一个 div。我有以下代码不适合我。你看有什么问题吗？ 检查 jsfiddle http://jsfiddle.net/N5Ltt/1/

$(document).keydown(function(e) {
    switch (e.which) {
    case 37:
        $('div').stop().animate({
            left: '-= 10'
        }); //left arrow key
        break;
    case 38:
        $('div').stop().animate({
            top: '-= 10'
        }); //up arrow key
        break;
    case 39:
        $('div').stop().animate({
            left: '+= 10'
        }); //right arrow key
        break;
    case 40:
        $('div').stop().animate({
            top: '+= 10'
        }); //bottom arrow key
        break;
    }
})

Answer 1

你需要做两件事:

1. 你的 <div>需求position: absolute或者你的 top and left 属性不会做任何事情。
2. jQuery 不知道什么'-= 10'意味着但它确实理解'-=10' .你可能想一直走到'-=10px'因为这更常见但是 px没有必要。

更新 fiddle :http://jsfiddle.net/ambiguous/N5Ltt/2/

当您按住箭头键时，您会看到动画停止，因为您调用了 .stop 在每个按键上停止动画。动画使用计时器和 .stop 工作停止计时器；如果键盘的重复率比计时器的第一次迭代快，则当您按住箭头键时不会出现动画。您一次只能移动 10px，因此您可以使用 .css 直接进行 10px 的非动画移动。 :

$div.css('left', $div.offset().left - 10);

非动画版:http://jsfiddle.net/ambiguous/N5Ltt/3/