jQuery Transit 动画重叠答案

【问题标题】：jQuery Transit animation overlappingjQuery Transit 动画重叠
【发布时间】：2014-01-02 08:15:56
【问题描述】：

我遇到了重叠过渡的问题 - 一个过渡在前一个过渡结束之前开始。

$obj.stop(true, false).transition({'-webkit-transform': 'translateX(' + (pos)  + 'px)', 'width':width + 'px'},  1500 );

如果您将按钮悬停得足够快，您将看到动画“跳转”到其最终设置而没有过渡。我尝试使用 .stop() 和 .clearQueue() 方法无济于事。

我知道还有其他方法可以实现这一点（jQuery.animate()，编写静态 css），但我认为在 jQuery.transitions 中必须有一种方法来解决这个问题。

有什么想法吗？

【问题讨论】：

【解决方案1】：

默认情况下，jQuery 过渡将链接动画。因此，不要像在代码中那样使用任何 stop() 方法。实际上 stop() 不应该与 transition() 一起使用。

_$blackLine.transition({'-webkit-transform': 'translateX(' + (pos)  + 'px)', 'width':width + 'px'},  1500 );// without stop() method

需要注意的是，如果您悬停所有菜单，所有动画都会一个接一个地播放。作为旁注，有一些 jQuery Transit 的拉取请求/分支添加了 stop() 功能：https://github.com/rstacruz/jquery.transit/pulls

【讨论】：

嘿 Akaryatrh，感谢您的回复，但这并不能解决问题：它只是将所有动画排队。如果您快速将鼠标悬停在类别上，则动画将在您停止悬停之后继续播放很长时间。不是我正在寻找的解决方案。
嗯，您的问题是“我遇到了重叠转换的问题 - 一个转换在前一个转换结束之前开始”。这个问题是固定的 :) 正如我告诉过你的，如果你想要一个 stop() 方法，你必须使用一个 jQuery Transit 的分支（也许这个：github.com/rstacruz/jquery.transit/pull/110）

【解决方案2】：

这是一个旧线程，因此您可能不再有问题，但对于通过搜索来到这里的任何人，您的问题是堆叠动画和太慢的动画。

如果你避免 stop() 并且只使用 clearQueue() 然后将动画时间从 1.5 秒降低到 400 毫秒，问题似乎得到了解决。

_$blackLine.clearQueue().transition({'-webkit-transform': 'translateX(' + (pos)  + 'px)', 'width':width + 'px'},  400 );

【讨论】：