Перемещение div при нажатии и удержании кнопки

В основном я хочу, чтобы мой плеер двигался, когда я нажимаю и удерживаю кнопку, используя функцию JQuery .mousedown. Проблема в том, что игрок не двигается постоянно влево, он просто ходит один раз. Я хочу, чтобы он продолжал двигаться влево, пока я не наведу курсор мыши.

Вот мой код:

$('#arrowRight').mousedown(function() {
      $('#player').animate({'left':'+=20px'});
});

Есть идеи?


jquery mouseup mousedown
person NotToBrag    schedule 18.08.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуй это:

var isDown = false;
$arrowRight = $("#arrowRight");
$arrowLeft = $("#arrowLeft");
$arrowRight.mousedown(function(){isDown = true;});
$arrowLeft.mousedown(function(){isDown = true;});
$(document).mouseup(function(){
    if(isDown){
        isDown = false;
    }
}); 

$arrowRight.mousedown(function() {movePlayer('+=20');});
$arrowLeft.mousedown(function() {movePlayer('-=20');});

function movePlayer(intMovement){
  $( "#player" ).animate({
        'left': intMovement +'px'
  }, 100, function() {
      if (isDown){
          movePlayer(intMovement);
      }
  });
}

Проверьте демонстрацию JSFiddle

person Moshtaf    schedule 18.08.2014
comment
@NotToBrag: при необходимости проверьте обновленный ответ как для правого, так и для левого решения. - person Moshtaf; 19.08.2014

arrow_upward
0
arrow_downward

Перейдите по этой ссылке http://remysharp.com/2006/12/15/jquery-mousehold-event/ Плагин для события mousehold. Это должно работать в вашем случае. Вы также можете написать свой собственный, установив временной интервал в событии нажатия мыши на каждые 0,1 секунды. Я считаю, что вышеуказанный плагин делает то же самое, но уже готов. ХТН.

person MDJ    schedule 18.08.2014