jquery - 滚动菜单中 jQuery stop() 中的奇怪效果/闪烁

Question

我用 jQuery 翻转菜单制作了这个网站:

http://www.ffsolar.com/index.php?lang=EN&page=home

碰巧它运行得不好。请尝试将鼠标从“服务”按钮上的空白区域快速移动到图像中间。发生了奇怪的效果，菜单开始“闪烁”，直到您将鼠标移出才会停止。

这是我的 jQuery 代码:

$('#main_navi li').hover(
        function () {
            //show its submenu
            $('ul', this).stop(true,true).slideDown(200);
       }, 
        function () {
            //hide its submenu
            $('ul', this).stop(true,true).slideUp(200);
        }
    );

有人可以解释一下为什么会发生这种情况以及我能做些什么吗？我已经在 stop() 中尝试了 true 和 false 的所有组合，但没有成功。

Answer 1

我无法真正确定它，但在我看来，这是时间问题。当您将鼠标快速移动到它上面时，会发生什么，您的菜单项收到 mouseover 事件，它会展开菜单，但在菜单展开之前，它会稍后收到 mouseout 事件并折叠它，但是因为鼠标现在位于展开的菜单上，所以它再次收到鼠标悬停(我对此不太确定，因为这看起来很奇怪，即使鼠标没有移动，也会调度鼠标悬停/移出事件)。 请记住，浏览器每隔几毫秒调度一次 mousemove 事件，而不是针对它移动的每个像素。同样，鼠标悬停和鼠标移出事件不一定在它们实际发生的时间精确调度。如果我对事件疯狂的假设是正确的，那么应该可以在滑道之前使用 stop() 来解决它，尽管您说您已经尝试过。这样幻灯片应该在鼠标移开时立即缩回。

编辑创建了 jsFiddle here