•  
     

O Evento .keydown() - jQuery

Você não está limitado aos eventos que utilizam o mouse em jQuery — você também pode disparar eventos usando o teclado!

O evento .keydown() é disparado toda vez que uma tecla do teclado é pressionada. Isso só funciona em elementos da página que tenham foco, então você precisa clicar na janela que contém o bloco div antes de pressionar uma tecla para ver seus efeitos.

Vamos em frente e vamos combinar nosso novo evento com um novo efeito: .animate()! Vamos usá-lo para mover um objeto na tela sempre que apertarmos uma tecla.

O efeito .animate() recebe dois parâmetros de entrada: a animação a ser realizada, e o tempo no qual ela deve ser realizada. Eis um exemplo:

Código: Selecionar todos

$(document).ready(function() {
   $('div').animate({left:'+=10px'},500);
});

Esse código vai mover o primeiro bloco div que ele encontrar e movê-lo 10 pixels para a direita. Lembre-se, aumentar a distância com relação à margem esquerda move o objeto para a direita; o operador += é apenas um atalho para "somar 10 ao número existente." Nesse caso, adicionamos 10 pixels à atual distância com relação à margem esquerda.

HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div></div> 
</body>
</html>


CSS

Código: Selecionar todos

div {
    height: 50px;
    width: 50px;
    border-radius: 10px;
    background-color: #FF0000;
    position: relative;
}


JavaScript

Código: Selecionar todos

$(document).ready(function(){
$(document).keydown(function(){
$('div').animate({left:'+=10px'},500);
});
});



Clique no div e depois digite uma tecla: http://jsfiddle.net/465w5b4u/