2

我用 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() 中尝试了所有真假组合，但没有成功。

4

1 回答 1

1

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

编辑在这里做了一个jsFiddle

于 2012-04-15T18:24:47.223 回答