Con un switch
y utilizando el event.which
para obtener la tecla que realizó el evento funciona correctamente, es cuestión de sumar y restar los pixeles hacia arriba y a la izquierda, te dejo el ejemplo:
$(document).keydown(function(tecla){
//$('#hijo').css('position', 'relative');
switch (tecla.which) {
case 37:
$('div').animate({
left: '-=10px'
}, 'fast'); //left arrow key
break;
case 38:
$('div').animate({
top: '-=10px'
}, 'fast');
break;
case 39:
$('div').animate({
left: '+=10px'
}, 'fast');
break;
case 40:
$('div').animate({
top: '+=10px'
}, 'fast');
break;
}
});
#square {
border: 1px solid black;
height: 300px;
margin: 20px auto;
position: relative;
width: 60%;
}
#square #hijo {
background:#ccc;
height:100px;
width:100px;
position: absolute;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="square">
<div id="hijo">
</div>
</section>
Te comento que dejé una línea comentada en el JQuery
, ya que si observas en tu css
le estás dando una posición absolute
y luego una posición relative
. Espero te ayude esta solución. Saludos.