javascript - 快速移动光标时的Jquery悬停问题

Question

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

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

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

1. 与鼠标移入鼠标效果相同的问题，封面标志有时不会弹回原来的位置，有时会。这只发生在您快速移动光标时。

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

Answer 1

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

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

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

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

Answer 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
    });