(JQuery) Перемещение элемента при нажатии клавиш?

$("html").keydown(function(event){ 

     if(event.which == "37") 
      $("#hero").animate({"left" : "-=30px"}); 

     if(event.which == "39") 
      $("#hero").animate({"left" : "+=30px"}); 

     if(event.which == "38") 
      $("#hero").animate({"top" : "-=30px"}); 

     if(event.which == "40") 
      $("#hero").animate({"top" : "+=30px"}); 
});

Кажется, что очередь всех нажатых клавиш , и мне нужно, чтобы эта очередь была пустой при изменении направления. Потому что, если я удерживаю левую клавишу нажатой в течение нескольких секунд, а затем нажимаю вправо, «#hero» будет уходить влево в течение длительного времени, а затем идти вправо.(JQuery) Перемещение элемента при нажатии клавиш?

источник

2012-02-06 user1091856

Вы должны остановить текущую анимацию, чтобы избежать этого. Попробуй это.

$("html").keydown(function(event){ 

     if(event.which == "37") 
      $("#hero").stop(true).animate({"left" : "-=30px"}); 

     if(event.which == "39") 
      $("#hero").stop(true).animate({"left" : "+=30px"}); 

     if(event.which == "38") 
      $("#hero").stop(true).animate({"top" : "-=30px"}); 

     if(event.which == "40") 
      $("#hero").stop(true).animate({"top" : "+=30px"}); 
});

.stop([clearQueue] [, jumpToEnd]) ссылка: http://api.jquery.com/stop/

clearQueue - Логическое значение, указывающее, следует ли удалить анимацию из очереди , а также. По умолчанию false. jumpToEndA - Boolean, указывающий, следует ли выполнить текущую анимацию сразу. По умолчанию false.

источник

2012-02-06 22:05:31 ShankarSangoli

Это работает, но что, если я хочу идти по диагонали? – user1091856

Для движущегося элемента диагонально изменить значения 'left' и' top' вместе. – ShankarSangoli

Как? Каждый раз, когда вызывается функция события, свойство keyCode содержит только одно значение, как я могу проверить, нажаты ли обе клавиши (вверху и слева)? – user1091856

$("#hero").stop().animate(...);

Должно быть достаточно

источник

2012-02-06 22:04:48 Zlatev

Если вы не в очереди анимации, то вы можете позволить элемент анимации по диагонали:

$("html").keydown(function(event){ 
    if(event.which == "37") $("#hero").animate({"left" : "-=30px"}, { queue : false }); 

    if(event.which == "39") $("#hero").animate({"left" : "+=30px"}, { queue : false }); 

    if(event.which == "38") $("#hero").animate({"top" : "-=30px"}, { queue : false }); 

    if(event.which == "40") $("#hero").animate({"top" : "+=30px"}, { queue : false }); 
});

Вот демо: http://jsfiddle.net/x5Tn4/

источник

2012-02-06 22:30:58 Jasper

Проверьте мой demo, в котором я использую максимум из 2 ключевые штрихи для плавного перехода.

источник

2012-02-06 22:35:46

(JQuery) Перемещение элемента при нажатии клавиш?

ответ

Смежные вопросы