我遇到了重叠过渡的问题 - 一个过渡在前一个过渡结束之前开始。
$obj.stop(true, false).transition({'-webkit-transform': 'translateX(' + (pos) + 'px)', 'width':width + 'px'}, 1500 );
JsFiddle 示例：http: //jsfiddle.net/s4r88/18/。
如果您将按钮悬停得足够快，您将看到动画“跳转”到其最终设置而没有过渡。我试过使用 .stop() 和 .clearQueue() 方法无济于事。
我知道还有其他方法可以实现这一点（jQuery.animate()，编写静态 css），但我认为必须有一种方法可以在 jQuery.transitions 中解决这个问题。
有任何想法吗？
默认情况下，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
这是一个旧线程，因此您可能不再有问题，但是对于通过搜索来到这里的任何人来说，您的问题是堆叠动画和太慢的动画。
如果您避免使用 stop() 并仅使用 clearQueue()，然后将动画时间从 1.5 秒降至 400 毫秒，则问题似乎已解决。
_$blackLine.clearQueue().transition({'-webkit-transform': 'translateX(' + (pos) + 'px)', 'width':width + 'px'}, 400 );
在这里看小提琴：http: //jsfiddle.net/2abg1cn5/