title: How to move a Picture with JQuery keyDown?
body: <p>Hello I am a beginner in web programming. I am learning at "CodeAcademy.com". I was making a small page to practice what I already learned, but something is wrong with my code.
  <a href="http://www.codecademy.com/users/51c6f009631fe9fe4f01b2d7/projects/500c7558d143430002002551" rel="nofollow">Here is the Page</a></p>
  
  <p>I wanted to make the logo move on pressing W A S D and wrote the code, but something is wrong.</p>
  
  <p>My HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src='script.js'&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"&gt;     &lt;/script&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id='menu'&gt;
          &lt;h3&gt;Header 1&lt;/h3&gt;
          &lt;div&gt;&lt;p&gt;The jQuery UI library bestows on us a lot of magic, including the datepicker widget. We saw how to use that in the date picker project, but with our knowledge of JavaScript, we can add all kinds of bells and whistles.&lt;/p&gt;&lt;/div&gt;
          &lt;h3 id='h3'&gt;Header 2&lt;/h3&gt;
          &lt;div id="move"&gt;&lt;img src="http://www.gravatar.com/avatar/9aba2f4a04dbccedb70a93033b55b166?d=retro&amp;s=140"/&gt;&lt;/div&gt;
          &lt;h3&gt;Header 3&lt;/h3&gt;
          &lt;div&gt;&lt;img id='2' src="http://www.gravatar.com/avatar/9aba2f4a04dbccedb70a93033b55b166?d=retro&amp;s=140"/&gt;&lt;/div&gt;
      &lt;/div&gt;   
  &lt;/body&gt;
  </code></pre>
  
  <p>And My JS.</p>
  
  <pre><code>$(document).ready(function() 
  {
      $('#menu').accordion();
      $('#2').draggable();
      $('#move').keydown(function(key)
      { 
      switch(parseInt(key.which,10)) 
         {
              case 65:
          $('#move').animate({left: "-=10px"}, 'fast');
          break;
      case 83:
          $('#move').animate({top: "+=10px"}, 'fast');
          break;
      case 87:
          $('#move').animate({top: "-=10px"}, 'fast');
          break;
      case 68:
          $('#move').animate({left: "+=10px"}, 'fast');
          break;
      default:
          break;      
         }
     });    
  </code></pre>
  
  <p>});</p>
  
  <p>what's wrong with it?</p>