快速移动光标时的Jquery悬停问题答案

【问题标题】：Jquery hover problems when moving cursor fast快速移动光标时的Jquery悬停问题
【发布时间】：2012-09-19 01:51:17
【问题描述】：

我的 Jquery 悬停效果有两个问题。

如果您将鼠标移入和移出非常快（几次），即使鼠标不再位于包含的 DIV 内，它也会保持鼠标悬停效果。

我需要类似 if(background is visible && mouse not in div element ) 然后播放鼠标移出动画。（重置封面标志）

与鼠标移入鼠标效果相同的问题，封面徽标有时不会弹回其原始位置，而其他时候会。只有当您快速移动光标时才会发生这种情况。

http://jsfiddle.net/e7BLv/13/

【问题讨论】：

Opera 12.02浏览器没有问题，你测试过哪个浏览器？
试过这个吗？ $('.home_logo3 li').hover(mouseOverMe3 , mouseOutMe3);
Miha 因为 hover 只是 mouseenter 和 mouseleave 的包装，我怀疑这会解决问题。
你确定所有这些效果都是为了体验收益吗？它们通常是分散注意力而不是增强。当你开发它时，它可能看起来很漂亮，但用户通常会为此感到困扰。将您的 Javascript 功能更改为 CSS 转换，您将不会遇到与鼠标事件和长时间运行的功能相关的任何问题，因此可以在同一个线程上相互竞争和超越...
@RobertKoritnik 是的，我更喜欢使用 css 转换，但 IE 不支持它们，除非它是 IE 10。Jquery 是一个更一致的解决方案，至少目前是这样。

标签： javascript jquery html

【解决方案1】：

我已将 JSfiddle 更改为使用最新的 jQuery 库，并将弹跳动画更改为简单的淡入淡出...而且它似乎按预期工作。

我想你的反弹效果（由 jQuery UI 提供）可能是阻止以某种方式正确停止的罪魁祸首。

鼠标事件处理程序外部的延迟动画

如果需要，请使用简单的过渡，如果可能的话，将动画移出事件处理程序并延迟执行，因此快速悬停不会触发任何过渡动画。这可能是确保正确处理和记录所有鼠标事件的最佳方式。

【讨论】：

是的，我想这真的只是“反弹”方法的问题
今晚让我不要再用头撞墙了，谢谢！

【解决方案2】：

这可能是动画队列的问题。检查 jQuery 的停止方法。官方文档中的例子对你有帮助http://api.jquery.com/stop/.

正如文档建议的那样，可能需要将 jQuery 版本更新到 > 1.7。如果您不能使用更新的 jQuery 版本，并且您正在更改不透明度，则必须将不透明度设置为 0 / 1 而不是使用 fadeIn fadeOut。例如：

$el.bind('mouseenter',function(){
    $(this).stop().animate({
        opacity: 1
    });
}).bind('mouseleave',function(){
    $(this).stop().animate({
        opacity: 0
    });

【讨论】：