翻转时如何让循环动画暂停？答案

【问题标题】：How do I get a looping animation to pause when rolled over?翻转时如何让循环动画暂停？
【发布时间】：2010-11-16 04:06:01
【问题描述】：

这是我到目前为止所管理的，但似乎没有人可以帮助我完成最后几个功能：

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

【问题讨论】：

那么它现在做了什么？它是无法停止，还是重新开始？

标签： jquery animation html hover

【解决方案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 上创建了一个演示 - here

希望对你有帮助

【讨论】：

【解决方案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>

【讨论】：