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/