Skip to main content
3 de 3
se añadieron 72 caracteres en el cuerpo

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.