Question

我有一个如question所述的设置，它可以完美地运行。当您将鼠标移到它上面以显示更多选项时，基本上会有一个下拉菜单。

然而，有一个小问题。如果您将鼠标移动到#dropdown div之外然后再次快速返回，它会不断触发mouseenter和mouseleave事件，从而导致永无止境的闪烁周期。我怎么能绕过它？

这是我当前的jQuery代码

$("#dropdown").hover(function() { 
        $(this).stop(true,true).fadeTo('fast',1);
        $("#options").stop(true,true).slideDown();
    }, function() { 
        $(this).stop(true,true).fadeTo('fast',0.1);
        $("#options").stop(true,true).slideUp();
    }
);

当前的HTML代码

<div id="dropdown">
    <div id="optionsPeek">Options</div>
    <div id="options">
        <!-- Links here -->
    </div>
</div>

dropdown默认情况下可见（10％不透明度），optionspeek始终可见，一旦您将鼠标悬停在options上，{{1}} div会向下滑动，其中的链接将变为可见。

Answer 1

我发现处理此类问题的最佳方法是使用HoverIntent插件。它旨在防止您遇到的闪烁问题。

Answer 2

如果您向淡出添加delay()怎么办？例如1-2秒。这样，您可以将鼠标移开并返回到下拉列表，而不会产生任何动画。

http://api.jquery.com/delay/

Answer 3

使用：

溢出：隐藏;

Answer 4

我似乎没有得到你提到的闪烁，但是又一次 - 我确实创建了标记因为你的不可用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#dropdown").hover(function() { 
        $(this).stop(true,true).fadeTo('fast',1);
        $("#options").stop(true,true).slideDown();
    }, function() { 
        $(this).stop(true,true).fadeTo('fast',0.1);
        $("#options").stop(true,true).slideUp();
    }
);
});
</script>
</head>
<body>
<div id="dropdown" style="width: 300px; height: 150px; border: 1px solid black;">DROPDOWN</div>
<div id="options" style="width: 300px; height: 150px; border: 1px solid black;">OPTIONS</div>

</body>
</html>

jQuery - 使用hover（）动画闪烁

4 个答案: