title: Jquery move element from center to left and left to center
body: <p>Please help me to solve this problem. I have a code which will move the div from center to left if click moveLeft and left to center when I click moveCenter using jquery animate(); here's my code below:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  // Store offset before any animations
  // (using .each here, but it could also be done in a click handler,
  // before starting the animation)
  $(document).ready(function(e) {
      // Retrieve the offsets later
      var element = $('.page-container');
      $('.moveLeft a').on('click', function(){
              element.data("originalOffset", element.offset());
              $('.page-container').animate({left:-element.offset().left*2},'slow');
      });
  
      $('.moveCenter a').on('click', function(){
              var offsetBack = element.data("originalOffset");
              $('.page-container').animate({left:offsetBack.left},'slow');
      });
  
  });
  
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  .page-container
  {
      width:700px;
      height:1000px;
      background:#000;
      position:absolute;
      margin:0px auto;
      left:0;
      right:0;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="moveLeft"&gt;&lt;a href="#"&gt;MoveLeft&lt;/a&gt;&lt;/div&gt;
  &lt;div class="moveCenter"&gt;&lt;a href="#"&gt;MoveCenter&lt;/a&gt;&lt;/div&gt;
  &lt;div class="page-container"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Above code, never worked for me. I tried also to used jquery data() but doesn't work too.</p>
  
  <p>Do I need to use another function instead of animation()?</p>
  
  <p>Thanks</p>