title: Animate div from right to left and then from left to right again
body: <p>I try to animate a div from its original position to left of the screen, if a button was clicked. If another button is clicked then i want it to animate back to it's origin position. I was able to figure out on how to animate it from right to left, but i cant animate it back to its original position.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var left = $('#coolDiv').offset().left;
  
  $("#b1").click(
    function() {
      $("#coolDiv").css({
        left: left
      }).animate({
        "left": "0px"
      }, "slow");
    }
  );
  
  $("#b2").click(
    function() {
      $("#coolDiv").css({
        right: right
      }).animate({
        "right": "0px"
      }, "slow");
    }
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#coolDiv {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    background: yellow;
  }
  #b1 {
    margin-top: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="coolDiv"&gt;cool&lt;/div&gt;
  &lt;button id="b1"&gt;left&lt;/button&gt;
  &lt;button id="b2"&gt;right&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/XqqtN/5385/" rel="nofollow noreferrer">http://jsfiddle.net/XqqtN/5385/</a></p>