按下一个键时继续移动元素jQuery

Question

我一直在尝试找到一种解决方案，该解决方案允许我在按住单个键时在 div 中替换 css 属性。

我正在尝试通过使用左右箭头来移动角色，但我无法在按下键时移动它，现在它仅在按下右键然后释放时移动。

这是我的代码：

$(document).keydown(function(e) {
  switch (e.which) {
    case 37: //left arrow key
      $("#matteo-walking").css("left", "-150px");
      break;
    case 39: //right arrow key
      $("#matteo-walking").css("left", "-150px");
      $("#matteo-walking").css("left", "0px");
      $("#matteo-walking").css("left", "-150px");
      break;
  }
});

$(document).keyup(function(e) {
  switch (e.which) {
    case 37: //left arrow key
      $("#matteo-walking").css("left", "-150px");
      break;
    case 39: //right arrow key
      $("#matteo-walking").css("left", "0px");
      break;
  }
});

#matteo-container {
  position: absolute;
  left: 50%;
  bottom: 150px;
}

#matteo-character {
  position: relative;
  left: -50%;
  width: 150px;
  height: 200px;
  overflow: hidden;
}

#matteo-walking {
  background: url('http://www.matteoschiatti.it/fancycv/images/matteo-walking.png');
  position: absolute;
  height: 200px;
  width: 300px;
  left: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="matteo-container">
  <div id="matteo-character">
    <div id="matteo-walking"></div>
  </div>
</div>

在这个阶段，角色一直在移动他的腿，只要我按下并释放右键，有没有办法在我一直按下时得到相同的结果？我在想这样的事情：每个 X px，left 属性返回 0px，然后在 X px 之后，left 属性一次又一次变为-150px，但我不确定这是否是正确的方法以及如何做到这一点，因为我还必须想想角色的回归。

这里是小提琴：

https://jsfiddle.net/matteous1/uvf2qrds/1/

Answer 1

你能试试下面的小提琴吗？我在你的作品的启发下创作了同样的作品。

https://jsfiddle.net/abinthaha/uvf2qrds/71/

var currentPosition = 0;
var moveVal = 25;
$(document).keydown(function(e){
    switch (e.which){
    case 37:    //left arrow key
                currentPosition += moveVal;
        break;
    case 39:    //right arrow key
                currentPosition -= moveVal;
        break;
    }
        startMovement();
        setBgPos(currentPosition);
});

$(document).keyup(function(e){
    endMovement()
});

function startMovement() {
    $('#matteo-walking').addClass('movement');
}

function endMovement() {
    $('#matteo-walking').removeClass('movement');
}

function setBgPos(currentPosition) {
    $('#matteo-container').css('background-position', currentPosition + 'px -300px');
}

谢谢

Answer 2

我想你快到了。我设法使用 keyup 和 keydown 的事件侦听器并通过重置位置使其工作。我的回答基于this article

position = 0
document.addEventListener('keydown', function(event) {
   console.log(event.code)
   handleMovement(event);
});

document.addEventListener('keyup', function(event) {
   console.log('stopped')
   handleStop(event);
});

function handleMovement(e) {
  if (event.code == 'ArrowLeft') {
    position -= 150
    let newPosition = position + 'px'
    console.log(newPosition)
    $("#matteo-walking").css("left", newPosition);
    $("#matteo-character").css("left", '-50%');
  }
  if (event.code == 'ArrowRight') {
    position -= 150
    let newPosition = position + 'px'
    console.log(newPosition)
    $("#matteo-walking").css("left", newPosition);
    $("#matteo-character").css("left", '50%');
  }
}

function handleStop(e) {
  position = 0
  $("#matteo-walking").css("left", "0px");
}

见JSFiddle

Answer 3

我拿了你的代码，做了一些安排，现在走:)

Css（添加类）：

.step-position
{
   background-position-x : -150px !important;
}

Javascript：

$(document).keydown(function(e){
 switch (e.which){
    case 37:    //left arrow key
     animateStep();
     break;
    case 39:    //right arrow key
     animateStep();
     break;
   }
});

$(document).keyup(function(e){
switch (e.which){
case 37:    //left arrow key
    moveStep(false);
    break;
case 39:    //right arrow key
    moveStep(true);
    break;
}
});

function animateStep()
{
  $("#matteo-walking").addClass('step-position');
  setTimeout(function(){$("#matteo-walking").removeClass('step-position');},100);
}

function moveStep(forward)
{
  var step = 30;
  var distance = $("#matteo-character").css("left").replace("px","") * 1;

  if(forward)
  { 
    distance += step;
  }
  else
  {
    distance -= step;
  }

  $("#matteo-character").css("left",distance + "px");
}

见JS Fiddle