Post
Ask Question

Animate an Image Based on the User's Input From the Keyboard

  1. $(document).ready(function()  
  2. {  
  3.     $(document).keydown(function(key)  
  4.     {  
  5.         switch (parseInt(key.which, 10))  
  6.         {  
  7.             // Left arrow key pressed  
  8.             case 37:  
  9.                 $('img').animate(  
  10.                 {  
  11.                     left: "-=10px"  
  12.                 }, 'fast');  
  13.                 break;  
  14.                 // Up Arrow Pressed  
  15.             case 38:  
  16.                 $('img').animate(  
  17.                 {  
  18.                     top: "-=10px"  
  19.                 }, 'fast');  
  20.                 break;  
  21.                 // Right Arrow Pressed  
  22.             case 39:  
  23.                 $('img').animate(  
  24.                 {  
  25.                     left: "+=10px"  
  26.                 }, 'fast');  
  27.                 break;  
  28.                 // Down Arrow Pressed  
  29.             case 40:  
  30.                 $('img').animate(  
  31.                 {  
  32.                     top: "+=10px"  
  33.                 }, 'fast');  
  34.                 break;  
  35.         }  
  36.     });  
  37. });  
Note: HTML, CSS & Javascript codes are there in the attachment.