1

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

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

4

1 回答 1

0

您需要使用 jQuery.finish() 函数，这样您就不会在鼠标快速移动后出现一长串动画。因此，更改以下行以在动画之前包含 .finish() 函数：

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

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

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

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

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

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

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

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

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

与第二个论点handlerOut。

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

编辑

首先，您不应该将完成功能添加到所有动画中。请看我的回答。您已将其添加到不应该的迷你菜单动画中。

您的问题出在这一行：

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

将其更改为：

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

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

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

于 2013-06-18T03:18:26.383 回答