Question

我有一个jquery悬停函数，有两个动画和三个.css函数。当你快速翻滚时，有奇怪的射击混合。我使用jsbin进行设置，你可以看到当你翻身然后离开时它会提示悬停，当你以正常速度进行它可以正常工作时，当你快速做到时你可以看到错误。我需要帮助解决这个问题，我能提出的任何建议都会非常有用，提前谢谢。

http://jsbin.com/isigoz/67/edit

Answer 1

您需要使用jQuery.finish（）函数，以便在快速移动鼠标后不会得到长动画队列。因此，在动画之前更改以下行以包含.finish（）函数：

$('.backing').finish().fadeOut();

$('#'+gymlocation+'_back').finish().fadeIn();

$('.backing').finish().fadeOut();

$('#'+current_back).finish().fadeIn();

然后您的鼠标悬停/退出区域的问题仅限于文本＆amp;不是整个彩色区域 - 这有点奇怪，但可能是你想要的？所以我没有为此提出解决方案。

您还有重复的JavaScript功能，可能会导致不需要的动画。删除代码的倒数第二部分：

$('#menu-wrapper').mouseleave(function() { ... and everything in-between ... });

因为你已经在这里调用了hover()这个动画：

$('#menu-wrapper').hover( handlerIn, handlerOut );

第二个参数handlerOut。

现在似乎好多了 - 不确定这是否是你所期待的。

修改

首先，您不应该将finish函数添加到所有动画中。请看我的答案。您已将其添加到迷你菜单动画中，您不应该这样做。

你的问题在于这一行：

$('#menu-text, .backing').css({ display:'none' });

将其更改为：

$('#menu-text, .backing').fadeOut();

为什么是因为你有其他动画影响文本菜单的显示属性，然后在隐藏它之后使其可见。 fadOut（）的持续时间比鼠标悬停时间长。因此，它似乎运作良好。

以下是链接：http://jsbin.com/isigoz/87/

jquery悬停功能快速鼠标部分火灾

1 个答案: