5

我正在尝试使用箭头键移动 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;
    }
})
4

1 回答 1

8

您需要做两件事：

  1. 您的<div>需求position: absolute或您的top财产left不会做任何事情。
  2. jQuery 不知道是什么'-= 10'意思，但它确实理解'-=10'. 您可能想一直这样做，'-=10px'因为这更常见，但px没有必要。

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

当您按住箭头键时，您会看到动画停止，因为您调用.stop每个按键并停止动画。动画使用计时器工作并.stop停止计时器；如果键盘的重复率比计时器的第一次迭代快，那么当您按住箭头键时不会发生动画。您一次只能移动 10px，因此您可以使用以下命令进行 10px 的直接非动画移动.css：

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

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

于 2011-10-16T04:09:15.363 回答