title: Animating back to the original position with jQuery
body: <p>I want to animate the image which is clicked by the user to the top left 100x100 then I want it to return to its original position where the animation started but with this piece of code it keeps sliding by some pixels to the top and left.  I couldn't figure out what causes this problem.  How can I make it return to its original position?</p>
  
  <pre><code>var posLeft;
  var posTop;
  
  $(this).children("img").click(function() {
  
  
          goToTopLeft($(this));
  
          $.each($(this).parent().children("img"), function() {
  
              $(this).css("z-index","0");
  
          });
  
          goToFrontFromTopLeft($(this));
  
          $(this).css("z-index", "1");
  
  
  
      });
  
  function goToTopLeft(img) {
          posLeft = img.position().left;
          posTop = img.position().top;
          img.animate({ top: '-=100', left: '-=100', height: 'toggle' }, 500);
      }
  
      function goToFrontFromTopLeft(img) {
          img.animate({ top: posTop, left: posLeft, height: 'toggle' }, 500);
      }
  </code></pre>