当按下一个键时，继续移动元素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左边的属性返回0px然后在X px之后左边的属性变成-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