Как заставить циклическую анимацию останавливаться при переворачивании?

Question

Это то, чем я управлял до сих пор, но, похоже, никто не может помочь мне с последними двумя функциями:

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

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

    }

    function swingback() { //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>

Answer 1

// 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();  
  }
});

Я создал демо на jsFiddle - здесь

Надеюсь, это поможет

Answer 2

Спасибо за помощь, но мне удалось пойти по-другому. Кажется, это работает фантастически, поэтому, если кто-то еще задает тот же вопрос, попробуйте:)

<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>