Pourquoi mon animation est-elle extrêmement lente à la reprise?

Question

J'ai une animation jQuery qui anime le 'scrollLeft' sur un conteneur pour produire une sorte d'effet de 'marquee'. Je l'ai mis en place donc sur le survol du conteneur il arrête l'animation, et à la sortie de la souris, il reprend.

$(banksContainer).mouseover(function() { 
    $(banksContainer).stop(false); 
}); 

$(banksContainer).mouseleave(function() { 
    startAnimation(); 
}); 

Chaque fois que je déplace la souris sur l'animation puis de l'animation, il reprend à une vitesse lente extrêmement, mais choisit progressivement après une minute. Pourquoi cela se produit-il et peut-il être résolu?

PS. Voici la fonction DebuterAnimation comme demandé:

// recursive function - represents one cycle of the marquee 
function startAnimation() { 
    $(banksContainer).animate(
     { scrollLeft: scrollLeftEnd }, 
     35000, 
     "linear", 
     function() { 
      $(this)[0].scrollLeft = scrollLeftHome; 
      startAnimation(); 
     } 
    ); 
} 

Answer 1

C'est probablement parce que quand vous reprenez l'animation, la distance à parcourir est réduite mais le temps reste à 35 secondes. puisque la vitesse = distance/temps, ce serait lent.

Je pense que vous devriez régler le temps proportionnellement à la distance restante. Ce serait 35000 * distance restante/distance totale.

Quelque chose comme ça?

function startAnimation() { 
    $(banksContainer).animate(
     { scrollLeft: scrollLeftEnd }, 
     35000 * this.scrollLeft()/scrollLeftEnd, //or scrollLeftHome whichever is non-zero 
     "linear", 
     function() { 
      $(this)[0].scrollLeft = scrollLeftHome; 
      startAnimation(); 
     } 
    ); 
}