0

我有这个问题中描述的设置，效果很好。本质上，当您将鼠标移到下拉菜单上以显示更多选项时，它会增长。

但是，有一个小问题。如果您将鼠标移到#dropdowndiv 之外，然后再次快速移回，它会不断触发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始终可见，一旦将鼠标悬停在它上面，optionsdiv 就会向下滑动，并且其中的链接变得可见。

4

4 回答 4

1

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

于 2010-05-18T15:47:05.367 回答
1

如果你delay()在淡出中添加一个怎么办？例如 1-2 秒。这样，您可以将鼠标移开并移回下拉菜单，而不会产生任何动画。

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

于 2010-05-18T15:47:58.677 回答
1

利用：

溢出：隐藏；

于 2010-08-03T11:18:21.843 回答
0

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

<!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>
于 2010-05-18T15:52:20.167 回答