title: JS make element move by applying .css
body: <p>I wanted to make an element move on arrow press by applying .css() but its not working at all and I cant figure out why. The exactly same code is working perfectly with JQ animate(). Can you explain me why the .css is not working ? I know there are better ways to do this but I'm just curious why its not attaching the top property.Below is the code with animate</p>
  
  <pre><code>$(document).ready(function(){
      $('body').keydown(function() {
          if (event.which == 38)
          {
              $('div').animate({top:'-=10px'},'fast');
          }
          else if (event.which == 40)
          {
              $('div').animate({top:'+=10px'},'fast');
          }
          else if (event.which == 37)
          {
              $('div').animate({left:'-=10px'},'fast');
          }
          else if (event.which == 39)
          {
              $('div').animate({left:'+=10px'},'fast');
          }
      }); 
  });
  </code></pre>