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 и left ничего не сделают.
2. jQuery не знает, что означает '-= 10', но понимает '-=10'.Возможно, вы захотите пройти весь путь до '-=10px', поскольку это более распространено, но px не требуется.

Обновленная скрипка: http://jsfiddle.net/ambiguous/N5Ltt/2/

Вывидеть, как анимация останавливается, когда вы удерживаете клавишу со стрелкой, потому что вы вызываете .stop при каждом нажатии клавиши, и это останавливает анимацию.Анимация работает с использованием таймера и .stop останавливает таймер;если частота повторения клавиатуры выше, чем первая итерация таймера, анимация не происходит, если вы удерживаете клавишу со стрелкой.Вы перемещаетесь только на 10 пикселей за раз, поэтому вы можете просто сделать прямое движение без анимации на 10 пикселей, используя .css:

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

Неанимированная версия: http://jsfiddle.net/ambiguous/N5Ltt/3/