Tengo un div que quiero mover usando las flechas del teclado usando jquery, el problema es que solo lo doy movido a la derecha y se sale del section donde tiene que estar. El html y css del ejercicio:
<section id="square">
<div id="hijo">
</div>
</section>
#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;
}
Mi jquery:
$(document).keydown(function(tecla){
$('#hijo').css('position', 'relative');
if (tecla.keyCode == 37) {
$('#hijo').animate({right: "+=10px"}, 'fast');
}else if(tecla.keyCode == 38) {
$('#hijo').animate({up: "+=10px"}, 'fast');
}else if(tecla.keyCode == 39){
$('#hijo').animate({left: "+=10px"}, 'fast');
}else if(tecla.keyCode == 40){
$('#hijo').animate({down: "+=10px"}, 'fast');
}
});
Nota: no quiero modificar los archivos html y css si no hacer todo con jquery