jquery - How do I get a looping animation to pause when rolled over? -

this have managed far, seems no 1 can me last couple of functions:

<script type='text/javascript''>     $(document).ready(function () {              swing();      });      function swing() { //making div swing         $('#share').animate({right: '210px'}, 1000, function(){swingback()});      }      function swingback() { //making div swing         $('#share').animate({right: '220px'}, 1000, function(){swing()});      }      $('#share').mouseenter(function() { // stop animation if mouse enters div         $(this).stop();       }).mouseleave(function() { // continue animation once mouse has left div         swingback();      });    </script> 

// flag manage animation  var resume = false;  $(document).ready(function(){   swing(); });   function swing(v){   // if animation stopped mid-swing resume   var total = v ? 210-math.abs(v): 210;    $('#share').animate({       right: '+=' + total + 'px'   }, 1000, function(){       resume = false;       swingback();   }); }  function swingback(){   $('#share').animate({     right: '0px'   }, 1000, function(){     resume = true     swing();   }); }  $('#share').bind({   mouseenter: function(){      $(this).stop();   },   mouseleave: function(){     // elements current position -- pass swing method resume     var v = parseint($(this).css('right'), 0);      if(resume)       swing(v);     else       swingback();     } }); 

i created demo on jsfiddle - here

hope helps