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

在你的幻灯片播放之前，你可以使用stop（）函数来停止所有当前的动画。

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

Answer 3

可能发生的事情是mouseleave事件根本没有触发。您可以通过向事件处理程序的开头添加一些console.log语句来测试，然后检查IE8的Developer Tools或Firebug以查看是否所有事件都在触发。

如果要中断正在运行的动画jQuery has a stop() method that does that。您可能还希望让每个slideDown导致所有其他幻灯片向上滑动。

Answer 4

这是因为每次进入和离开每个li元素时，您的动画队列都会建立起来。

试用hoverFlow jQuery Plugin

jquery悬停事件无法正常工作

4 个答案: