为什么我的动画在恢复后非常缓慢？

Question

我有一个jQuery动画，动画的'scrollLeft'在容器上产生一种'选取框'的效果。

我已经设置了鼠标悬停的动画，并在鼠标离开时恢复。

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

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

每当我将鼠标移动到动画再关动画，将恢复在非常速度慢，但一分钟左右后逐渐回升。

为什么会发生这种情况，是否可以解决？

PS。下面是按要求startAnimation功能：

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

Answer 1

这可能是因为当你恢复动画，来覆盖距离已经减少，但时间仍为35秒。因为速度=距离/时间，它会很慢。

我认为你应该设置与剩余距离成比例的时间。这将是35000 *剩余距离/总距离。

这样的事情？

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