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

This is what I have managed so far, but it seems no one can help me with the last couple of functions:

<script type='text/javascript''>
    $(document).ready(function () {     
        swing(); 
    });

    function swing() { //making the div swing
        $('#share').animate({right: '210px'}, 1000, function(){swingback()});

    }

    function swingback() { 开发者_Go百科//making the div swing back
        $('#share').animate({right: '220px'}, 1000, function(){swing()});

    }

    $('#share').mouseenter(function() { // stop any animation if the mouse enters the div
        $(this).stop();


    }).mouseleave(function() { // continue animation once the mouse has left the div
        swingBack();

    });



</script>

---

// flag to help manage animation 
var resume = false;

$(document).ready(function(){
  swing();
});


function swing(v){
  // if animation was stopped mid-swing then 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(){
    // get elements current position -- pass it to swing method for resume
    var v = parseInt($(this).css('right'), 0);

    if(resume)
      swing(v);
    else
      swingBack();  
  }
});

I created a demo on jsFiddle - here

Hope this helps

---

Thanks for the help, but I managed to go a different way about it. This seems to work fantastically, so if anyone else finds themselves asking the same question, give this a go :)

<script type='text/javascript''>
    $(document).ready(function () {     

        var moving = true;

        swing();            

        function swing() {
            if(moving==true) {
                $('#share').animate({right: '210px'}, 1000, function(){swingback()});
            }
        }

        function swingback() { 
            if (moving==true) {             
                $('#share').animate({right: '220px'}, 1000, function(){swing()});
            }                   
        }

        $('#share').mouseenter(function() {
            moving = false;             
        });

        $('#share').mouseleave(function() {
            moving = true;
            swing();
        });     
    });

</script>