Javascript jQuery Transit动画重叠

我有一个重叠过渡的问题-一个过渡在前一个过渡结束之前开始

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

JSFIDLE示例：

如果您足够快地悬停按钮，您将看到动画“跳跃”到其最终设置，而无需转换。 我尝试过使用.stop和.clearQueue方法，但没有效果

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

---

有什么想法吗？

默认情况下，jQuery transition将链接动画。所以，不要像在代码中那样使用任何stop方法。实际上，stop不应该与transition一起工作

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

需要注意的是，如果在所有菜单上悬停，所有动画都会一个接一个地播放。

---

作为旁注，jQuery Transit中有一些pull请求/fork添加了停止功能：

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

如果您避免停止，只使用clearQueue，然后将动画时间从1.5秒减少到400ms，那么问题似乎得到了解决

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

---

请参见此处的小提琴：

在最后一行之前，小提琴中有一个尾随大括号}，请更正它。嘿，Akaryatrh，谢谢你的回复，但这并不能解决问题：它只是将所有动画排队。如果您快速将鼠标悬停在类别上，动画将在您停止悬停后很长时间内继续播放。这不是我想要的解决方案。好吧，你的问题是我有一个重叠过渡的问题-一个过渡在前一个过渡结束之前开始。这个问题已经解决了：正如我告诉过你的，如果你想有一个stop方法，你必须使用jQuery的fork-Transit，可能是这个：