title: Slide box horizontally in jQuery with animate
body: <p>I want to slide a div left and right with animate in jQuery.
  So far I have the below conatined in <a href="http://jsfiddle.net/aaronk85/7urNX/" rel="nofollow">this fiddle</a>.</p>
  
  <p>The problem is that each time I am clicking left or right my variable left is going back to the original position onload rather than its current position.  What am i doing wrong here? I want it to go left on each click or right on each click from where it currently is.</p>
  
  <pre><code>    &lt;div id="yellowbox"&gt;&lt;/div&gt;
      &lt;div id="left"&gt;left&lt;/div&gt;
      &lt;div id="right"&gt;right&lt;/div&gt;
  
  
      &lt;script&gt;
          var left = $('#yellowbox').offset().left;
          console.log(left);
  
          jQuery(document).on('click', '#left', function(event) {
              $("#yellowbox").css({left:left}).animate({"left": (left -50)}, "slow");
          });
  
          jQuery(document).on('click', '#right', function(event) {
              $("#yellowbox").css({left:left}).animate({"left": (left +50)}, "slow");
          });
      &lt;/script&gt;
  
      &lt;style&gt;     
      #yellowbox {
          width: 50px;
          height: 50px;
          position: absolute;
          top: 0;
          right: 550px;
          background: yellow;
      }
      &lt;/style&gt;
  </code></pre>