jQuery - 使用 hover() 动画闪烁答案

【问题标题】：jQuery - Animation flicker using hover()jQuery - 使用 hover() 动画闪烁
【发布时间】：2010-05-18 15:41:01
【问题描述】：

我有一个如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 div 就会向下滑动，其中的链接变得可见。

【问题讨论】：

你能发布 html 标记吗？我猜#options 不在#dropdown 里面？

标签： jquery flicker jquery-animate

【解决方案1】：

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

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

【讨论】：

这看起来不错，但不幸的是它似乎不适用于stop()

【解决方案2】：

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

【讨论】：

【解决方案3】：

使用：

溢出：隐藏；

【讨论】：

【解决方案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>

【讨论】：