Jquery keyboard event does not respond

Question

I made this script to move a div by pressing the arrow keys on the keyboard. The right and down key are working perfectly, however, the top and left are not, the code ta the same as the others.

Follow the code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>        



    $(document).ready(function(){
      $(document).keydown(function(x){
        if(x.which == 39 || x.keyCode == 39){               
             $('div').animate({left: '1180px'});                 
        }           
      }).keyup(function(){
        $('div').animate().stop();
      });
    });


    $(document).ready(function(){
      $(document).keydown(function(x){
        if(x.which == 40 || x.keyCode == 40){               
             $('div').animate({top: '1180px'});              
        }           
      }).keyup(function(){
        $('div').stop();
      });
    });


    $(document).ready(function(){
      $(document).keydown(function(x){
        if(x.which == 37 || x.keyCode == 37){               
             $('div').animate({right: '1180px'});                
        }           
      }).keyup(function(){
        $('div').stop();
      });
    });


    $(document).ready(function(){
      $(document).keydown(function(x){
        if(x.which == 38 || x.keyCode == 38){               
             $('div').animate({ '1180px'});              
        }           
      }).keyup(function(){
        $('div').stop();
      });
    });


</script>

Answer 1

The way you did got added multiple events for when you press a key, the keyup has been added 4 times for example, maybe it is conflicting with the other keyDowns, really it is not necessary to make an event for each, best is all within a single event and use ifs or a switch for this

Also note that has no property defined in if(x.which == 38 || x.keyCode == 38), you only added the 1180px:

$('div').animate({ '1180px'});

Another thing, you added . Animate() needlessly:

  $(document).keydown(function(x){
    if(x.which == 39 || x.keyCode == 39){               
         $('div').animate({left: '1180px'});                 
    }           
  }).keyup(function(){
    $('div').animate().stop(); ///<--- aqui
  });

In the following example I switched $('div') for .personagem not to affect other Parties and preferably change the right and bottom by left and top with nagativos numbers, so jQuery will subtract from the already defined properties and CSS works well with negative numbers:

$(document).ready(function(){
  $(document).keydown(function(x){
    var keycode = x.which || x.keyCode; //Pega o código da tecla

    switch (keycode) {
        case 39:
            $('.personagem').animate({left: '1180px'});
        break;
        case 40:
            $('.personagem').animate({top: '1180px'});
        break;
        case 37:
            $('.personagem').animate({left: '-1180px'});
        break;
        case 38:
            $('.personagem').animate({top: '-1180px'});
        break;
    }           
  }).keyup(function(){
       $('.personagem').stop();
  });
});

.personagem {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    background: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="personagem"></div>

Another thing that might be interesting to do is to add . stop for another event to start, even if the keyup is not triggered, for example:

switch (keycode) {
    case 39:
        $('.personagem').stop().animate({left: '1180px'});
    break;
    case 40:
        $('.personagem').stop().animate({top: '1180px'});
    break;
    case 37:
        $('.personagem').stop().animate({left: '-1180px'});
    break;
    case 38:
        $('.personagem').stop().animate({top: '-1180px'});
    break;
}