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

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

修改制作jsFiddle here

翻转菜单中jQuery stop（）中的奇怪效果/闪烁

1 个答案: