title: Move an object (Mario-style) in jQuery
body: <p>I am trying to create a near-perfect object movement in jQuery. I have tried a few ways but none seems to be perfect. I have tried:</p>
  
  <ol>
  <li>Press key -> Move by x amount of pixels</li>
  <li>Press key -> Animate by x amount of pixels</li>
  </ol>
  
  <p>Moving a few pixels at a time makes it look laggy and bad. I think we can all agree on that. I then later found someone, who used animate to change the axis' coordinates (basically changing an object's left attribute to be bigger or smaller):</p>
  
  <p><a href="http://jsfiddle.net/2L86bdw0/1/" rel="nofollow">http://jsfiddle.net/2L86bdw0/1/</a></p>
  
  <pre><code>$('.user').animate({
      left: '+=500'
  },{
      duration: 1000,
      easing: 'linear',
  }).dequeue();
  </code></pre>
  
  <p>This basically moves it right 500 pixels over 1000 milliseconds. This makes the movement extremely smooth and seems like the best way to do this.</p>
  
  <p>However. Try holding down right arrow and then left. It should start to move left, which it does. However, when you then remove your finger from the left arrow, it should start to move right again (assuming you still hold down the right arrow). However, it does not.</p>
  
  <p>I have been looking for the best possible way to do this, however, I have not been able to find a good solution. I want to create a Mario-styled website, but I cannot make movement be near-perfect. Help appreciated.</p>