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

Question

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

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

我需要类似if（背景可见＆amp;＆amp; mouse不在div元素中）然后播放鼠标移动动画。 （重置封面标识）

1. 鼠标输入鼠标效果相同的问题，封面标识有时不会弹回原来的位置，有时也会弹回原位。只有当您快速移动光标时才会发生这种情况。

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

Answer 1

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

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

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

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

Answer 2

动画队列可能存在问题。 检查jQuery的stop方法。官方文档中的示例将帮助您http://api.jquery.com/stop/。

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

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