jQuery - 使用悬停（）的动画闪烁

发布于 2024-09-02 04:10:49 字数 963 浏览 6 评论 0原文

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

然而，有一个小问题。如果您将鼠标移出 #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 向下滑动，其中的链接变得可见。

原文

I have a setup as described in this question which works perfectly. Essentially a drop down menu grows when you move your mouse over it to expose more options.

There is, however, a small issue. If you move the mouse outside of the #dropdown div and then back in again quickly it constantly fires the mouseenter and mouseleave events causing a never ending cycle of flickering. How can I get around it?

Here is my current jQuery code

$("#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();
    }
);

And current HTML code

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

dropdown is visible by default (10% opacity), optionspeek is always visible and once you hover over it, the options div slides down and the links inside it become visible.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怂人 2024-09-09 04:10:49

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

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

回复收藏 0 原文

花辞树 2024-09-09 04:10:49

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

回复收藏 0 原文

灵芸 2024-09-09 04:10:49

使用：

溢出：隐藏；

回复收藏 0 原文

帅气称霸 2024-09-09 04:10:49

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

<!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>

I don't seem to be getting the flickering you mentioned, but then again - I did create the markup because yours wasn't available.

<!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>

回复收藏 0 原文

~没有更多了~