Блог

Я пытаюсь переместить 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;
    }
})
  

Вам нужно сделать две вещи:

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 /