jquery悬停事件未正常工作

Question

我有一个简单的水平菜单，当我将鼠标悬停在每个项目上时，一个子菜单就会滑下来。基本上，这是我们经常看到的典型导航菜单。我希望当鼠标滑出时，子菜单会上下滑动。我的问题是，如果我在项目间快速移动鼠标，就会出现一个以上的子菜单保持可见。我猜这是因为当我启动滑梯时，滑梯还没有滑完。有什么办法可以防止这种情况发生吗？下面是我的代码：

        $('#menu > li').hover(
                function () {
                    $('ul',$(this)).slideDown();
                },
                function () {
                    $('ul',$(this)).slideUp();
                }
            );

谢谢!

Answer 1

您应该在上下滑动之前调用stop，根据您的描述，您还应该为这两个可选参数传递true，如下所示：

$('ul',$(this)).stop(true, true).slideDown();

第一个参数(clearQueue)告诉jQuery清除动画队列，停止所有排队的动画。

第二个参数(gotoEnd)告诉jQuery完成当前动画。(在您的情况下，此参数可能不是必需的，具体取决于所需的效果。)

Answer 2

在停止之前，您可能可以使用slideUp ()函数来停止所有当前动画。

http://docs.jquery.com/Effects/stop

Answer 3

可能发生的情况是，mouseleave事件根本不会触发。您可以通过在事件处理程序的开头添加一些console.log语句来测试这一点，然后检查IE8的开发人员工具或Firebug，以查看是否所有事件都在触发。

如果要中断正在运行的动画，请使用jQuery has a stop() method that does that。您可能还想让每个slideDown都使所有其他的都向上滑动。