Skip to main content
se añadieron 72 caracteres en el cuerpo
Origen Enlace

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:

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:

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:

Te dejo también el ejemplo en tu versión de código por si lo necesitas:

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:

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:

se añadieron 1278 caracteres en el cuerpo
Origen Enlace

Te dejo también el ejemplo en tu versión de código 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.

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.

Te dejo también el ejemplo en tu versión de código 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.

Origen Enlace

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.