Keep moving an element when one key is pressed jQuery

Question

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.

Here my code:

$(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>

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.

Here the fiddle:

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

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

Thanks