title: How can I stop/resume jquery .animate() exactly where I left it?
body: <p>I'd like to stop a jQuery animation on mouseover and resume it on mouseout. I thought to use the Pause plugin but it jumps to the next step of the animation. How can I do this?</p>
  
  <p>Here's my code:</p>
  
  <pre><code>var animation_hamburger = function() {
      $('#inicio #logo .hamburger').animate({ left: 490 },4000);
      $('#inicio #logo .hamburger').animate({ top: 210 },2000);
      $('#inicio #logo .hamburger').animate({ left: -10 },4000);
      $('#inicio #logo .hamburger').animate({ top: -10 },2000);
      setTimeout(function(){
          animation_hamburger();
      },12000);
  }
  animation_hamburger();
  $('#inicio #logo .hamburger').mouseover(function(){
      $(this).stop();
  });
  </code></pre>
  
  <p>You can check the codepen here:</p>
  
  <p><a href="http://codepen.io/anon/pen/VeNGxN" rel="nofollow">http://codepen.io/anon/pen/VeNGxN</a></p>