title: How to make div move right and left using jQuery animate() method?
body: <p>Please take a look at this:</p>
  
  <p><a href="http://jsfiddle.net/tmPfV/" rel="noreferrer">http://jsfiddle.net/tmPfV/</a></p>
  
  <p>If you click right the box moves right and if you click left the box moves left. However if you click right again, nothing...</p>
  
  <p>How can I get it to move right and left as many times as I like instead of it working for one round and then not working again?</p>
  
  <p>Also if you clock left first and then right it also messes up, how to solve that?</p>
  
  <p>jquery:</p>
  
  <pre><code>            $('.right').click(function(e) {
                  e.preventDefault();
                  $('#foo').animate({
                      'right' : '30px'    
                  });                 
              });
              $('.left').click(function(e) {
                  e.preventDefault();
                  $('#foo').animate({
                      'left' : '30px'
                  });                 
              });
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>        &lt;a href="" class="left"&gt;left&lt;/a&gt; | &lt;a href="" class="right"&gt;right&lt;/a&gt;
          &lt;br /&gt;&lt;br /&gt;
          &lt;div id="foo" style="background:red;width:100px;height:100px;position:absolute"&gt;&lt;/div&gt;
  </code></pre>