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

您需要做两件事：

您的<div>需要position: absolute或您的top and left属性不会执行任何操作。
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/

jQuery使用箭头键移动div

1 个答案: