按下一个键时继续移动元素 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 左边属性 returns 0px 然后在 X px 左边属性变成 -150px 然后一次又一次，但我不确定这是不是正确的方法和方法，因为我还必须考虑角色的 return。

这里是fiddle:

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

Answer 1

你能试试下面的fiddle吗？我在你的作品的启发下创造了同样的东西。

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（加Class）：

.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

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

Keep moving an element when one key is pressed jQuery

html

css

jquery

keypress