Comment mettre en pause une animation en boucle lors d'un basculement?

Question

C'est ce que je suis parvenu à ce jour, mais il semble que personne ne peut me aider avec les deux dernières fonctions:

<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

Merci pour l'aide, mais je réussi à aller d'une manière différente à ce sujet. Cela semble fonctionner fantastiquement, donc si quelqu'un d'autre se trouve poser la même question, donner un aller :)

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

J'ai créé une démo sur jsFiddle - here

Hope this helps