Question

我有一个滑动div和几个按钮，它们将以不同的速度触发动画（通过使用不同的持续时间值）。

按钮类似于： [左x2] [左x1] [左x0.5] [右x0.5] [右x1] [右x2]

我的代码目前如下：

  //leftVal is set based on where the div is currently placed
  //timeLeft is set based on which button is "on hover"  

  $('#content-holder').animate({       
    "left": leftVal        
  }, {queue:false, duration:(timeLeft), easing:"quadEaseOut"});

这在Chrome中很好，但在其他浏览器（如IE）上会产生一个动画跳跃，您可以在继续以新的速度前看到滚动的div停止一瞬间。

我有一种感觉，实现变速滚动的最佳方法是直接影响动画的持续时间而不杀死它并开始新的动画，但我不确定这是否可行。有什么提示吗？

Answer 1

我认为你正在寻找这个：

$('#content-holder').stop().animate({       
"left": leftVal
}, {queue:false, duration:(timeLeft), easing:"quadEaseOut"});

.stop()杀死队列，然后开始制作动画。（http://api.jquery.com/stop/）

我经常使用它来避免在垃圾邮件多个按钮时我的网站被绊倒。

请注意，因为您正在使用缓动，因此动画无法顺利运行。当您调用新动画时，缓动也将从头开始“播放”。

然而，如果您的问题我想这就是您想要的，请阅读说明。

请告诉我它是否有帮助！

JQuery动画：在运行时改变速度

1 个答案: