Warum wird meine Animation beim Fortfahren extrem langsam?

Question

Ich habe eine jQuery-Animation, die das "scrollLeft" eines Containers animiert, um eine Art "Marquee" -Effekt zu erzeugen.

Ich habe es so eingerichtet, auf Mouse-over des Containers stoppt es die Animation, und auf Maus-verlassen, wird es fortgesetzt.

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

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

Jedes Mal, wenn ich mit der Maus über die Animation bewegen dann von der Animation, nimmt sie an einem extrem langsame Geschwindigkeit, sondern nimmt allmählich nach einer Minute oder so.

Warum passiert das und kann es gelöst werden?

PS. Hier ist die startAnimation Funktion wie gewünscht:

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

Answer 1

, die wahrscheinlich ist, weil, wenn Sie die Animation wieder aufnehmen, die Entfernung zum Deckel reduzierte aber die Zeit bleibt bei 35 Sekunden. da Geschwindigkeit = Entfernung/Zeit, wäre es langsam.

Ich denke, Sie sollten die Zeit proportional zur verbleibenden Entfernung einstellen. Das wären 35000 * verbleibende Distanz/Gesamtstrecke.

So ähnlich?

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