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 (top
, left
), 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 dejo también el ejemplo en tu versión de código con el mismo concepto del top
y left
que te comenté por si lo necesitas:
$(document).keydown(function(tecla){
$('#hijo').css('position', 'relative');
if (tecla.keyCode == 37) {
$('#hijo').animate({left: "-=10px"}, 'fast');
}else if(tecla.keyCode == 38) {
$('#hijo').animate({top: "-=10px"}, 'fast');
}else if(tecla.keyCode == 39){
$('#hijo').animate({left: "+=10px"}, 'fast');
}else if(tecla.keyCode == 40){
$('#hijo').animate({top: "+=10px"}, 'fast');
}
});
#square {
border: 1px solid black;
height: 300px;
margin: 20px auto;
position: relative;
width: 60%;
}
#square #hijo {
background-color: red;
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
}
<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 en mi ejemplo 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 en tu JQuery
una posición relative
. Espero te ayude esta solución. Saludos.