title: Make image move using keypress - jQuery
body: <p>I'm trying to make an image move using keypress. I have figured out where the problem is, I just haven't been able to fix it. The problem has to do with what's focused when the page loads. I fixed it using <code>tabindex</code>. In my opinion was that a poor solution.</p>
  
  <p>Code:</p>
  
  <pre><code>$(document).ready(function(){
      $("#hero").focus();
      ("#hero").on('keydown', function(event){
          switch(event.which){
              case 37:
                  $('#hero').stop().animate({
                      left: '-=10'
                  }); //left arrow key
                  break;
              case 38: 
                  $('#hero').stop().animate({
                              top: '-=10'
                  }); //up arrow key
                  break;
              case 39:
                  $('#hero').stop().animate({
                      left: '+=10'
                  }); //right arrow key
                  break;
              case 40: 
                  $('#hero').stop().animate({
                      top: '+=10'
                  }); //bottom arrow key
                  break;
          }
      });
  
  });
  </code></pre>
  
  <p>One would think <code>.focus()</code> is the way to go but for some reason that doesn't work. </p>
  
  <p><a href="http://jsfiddle.net/Nilzone/PuPZF/" rel="nofollow"><strong>Here is the fiddle</strong></a></p>
  
  <p>Thanks!</p>