title: jquery animate only fires once with keypress event
body: <p>Trying to get the p element to move 2D galactica style with awsd keys. 
  The keys work, just only once without having to refresh the page.</p>
  
  <p>The HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Moving with arrows&lt;/title&gt;
      &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;Hello World!&lt;/p&gt;
      &lt;script src="http://code.jquery.com/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The jQuery (console.log was obviously just to learn the keycodes)</p>
  
  <pre><code>var main = function () {
  
  $("body").on("keypress", function (event) {
      console.log(event.keyCode);
  
      if (event.keyCode === 97) {
          $("p").animate({right: "5px"});
      }
      else if (event.keyCode === 100) {
          $("p").animate({left: "5px"});
      }
      else if (event.keyCode === 119) {
          $("p").animate({bottom: "5px"});
      }
      else if (event.keyCode === 115) {
          $("p").animate({top: "5px"});
      }
  });
  };
  
  $(document).ready(main);
  </code></pre>
  
  <p>The Style</p>
  
  <pre><code>body {
  background: black;
  width: 750px;
  height: 100%;
  margin: auto;
  }
  
  p {
  position: relative;
  width: 100px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: auto;
  margin-top: 50%;
  color: white;
  background: grey;
  border-radius: 10px;
  }
  </code></pre>