jQuery使用箭头键移动div

Question

我正在尝试使用箭头键移动div。 我有以下代码对我不起作用。 你觉得它有什么问题吗？ 在http://jsfiddle.net/N5Ltt/1/查看jsfiddle

$(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和left属性不会执行任何操作。
2. jQuery不知道'-= 10'是什么意思，但它确实理解'-=10' 。 您可能希望一直到'-=10px'因为这更常见，但px不是必需的。

更新小提琴： http ： //jsfiddle.net/ambiguous/N5Ltt/2/

您按住箭头键时会看到动画停止，因为您在每个keydown上调用.stop并停止动画。 动画使用计时器和.stop停止计时器; 如果键盘的重复速率比计时器的第一次迭代快，则按住箭头键时不会发生动画。 你一次只能移动10px所以你可以使用.css进行10px的直接非动画移动：

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

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