按下一个键时继续移动元素 [英] Keep moving an element when one key is pressed jQuery

问题描述

我一直试图找到一种解决方案，当按住一个键时，该解决方案可以让我在div中更改css属性.

I've been trying to find a solution that allows me to alternate a css property in a div when a single key is kept pressed.

我试图通过使用向左和向右箭头来移动角色，但是当按下键时我无法使其移动，现在只是在按下并释放右键时它才移动.

I'm trying to make a character move by using the left and right arrows but I'm not able to make it move when the key is pressed, now it moves just when the right key is pressed and then released.

这是我的代码:

$(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然后一次又一次，但是我不确定这是否是正确的方法以及如何做到这一点，因为我也必须考虑一下角色的回归.

At this stage, the character keeps moving his legs just if I press and release the right button, is there a way to get the same result when I kept is pressed? I was thinking something like: every X px the left property returns 0px then after X px the left property becomes -150px then again and again but I'm not sure if this is the right way and how to do that because I have also to think about the return of the character.

这里是小提琴:

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

推荐答案

可以尝试下面的小提琴吗?我也是根据您的作品创作的.

Can you try the fiddle below. I created the same inspired by your work.

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');
}

谢谢

这篇关于按下一个键时继续移动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！