如何在循環動畫暫停時進行滾動？

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

感謝您的幫助，但我設法去了解它以不同的方式。 這似乎飛馳的工作，因此，如果任何人發現自己問同樣的問題，給這個一去:)

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

Answer 2

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

希望這有助於