title: jQuery .animate() not working
body: <p>I am new to jQuery and have been learning it through Codecademy. I am creating a 'codebit' (website) on the site, and I am trying to make an image sprite react (move) when the up, down, left and right keys are pressed.<br><br>
  <strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Sprite&lt;/title&gt;
          &lt;link rel='stylesheet' type='text/css' href='style.css'/&gt;
          &lt;script type='text/javascript' src='script.js'&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;img src="[img]"/&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>img {
      position: relative;
      left: 0;
      top: 0;
  }
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>$(document).ready(function() {
      $(document).keydown(function(key) {
          switch(parseInt(key.which,10)) {
              //LEFT
              case 37:
                  $('img').animate({left: "-=10px"}, 500);
                  break;
              //RIGHT
              case 39:
                  $('img').animate({left: "+=10px"}, 500);
                  break;
              //UP
              case 38:
                  $('img').animate({top: "-=10px"}, 500);
                  break;
              //DOWN
              case 40:
                  $('img').animate({top: "+=10px"}, 500);
                  break;
          }
      });
  });
  </code></pre>
  
  <p>I have checked on a few sites for syntax errors, and can't seem to find any obvious ones. Help would be most appreciated.    </p>