title: jQuery Two buttons making a picture move from left to right
body: <p>I want to make a picture (stickman picture) move from left to right as I click one of the two buttons that say "&lt;&lt;" and ">>". 
  Here's my code, </p>
  
  <pre><code>function personLeft() {
                  $('#img').animate({left:'50px'});
              }
  function personRight() {
                  $('#img').animate({right:'50px'});
              }
  </code></pre>
  
  <p>Here's the buttons,</p>
  
  <pre><code>&lt;button id='left' onclick='personRight()'&gt;&lt;&lt;&lt;/button&gt;
  &lt;button id='right' onclick='personLeft()'&gt;&gt;&gt;&lt;/button&gt;
  </code></pre>
  
  <p>For some reason, this doesn't work. It only makes him travel once to the right, or once to the left. I've tried doing this instead:</p>
  
  <pre><code>$(document).ready(function(){
      $('#left').click(function(){
          $('#img').animate({left:'50px'});
      });
      $('#right').click(function(){
          $('#img').animate({left:'50px'});
      });
  });
  </code></pre>
  
  <p>but it just did the same thing as the functions.
  If you need to see what I mean exactly, here's the <a href="http://dotcomaftereverything.com/jquery/game" rel="nofollow">link</a>.</p>
  
  <p>So, all I want to know is how can it be made that every time I click the right button, it'll go right for 50 pixels and every time I click the left button, it'll go left for 50 pixels. </p>