javascript - 使用 jQuery 的可扩展菜单 - 动画

Question

我正在尝试编写一个在悬停时展开子类别的菜单 - 因此一次只能展开一个子类别。它看起来像这样(完全展开):

• X
  • Y
    • Y.1
    • Y.2
  • Z
    • Z.1
    • Z.2

我的问题是:

动画正常工作，除非我将鼠标悬停在 Y 上然后尝试将鼠标悬停在 Z 上，所有 X 都会关闭。我知道为什么:需要延迟，因为 Z 开始向上移动，所以你不再悬停在 Z 上，它开始关闭。

代码如下:

    $( document ).ready(function() {
        $("#m2l2").hoverIntent(
            function() {
                clearTimeout(z_timer);
                $("#m2l2").toggleClass("child childopen");
                $("#u12").slideToggle("slow", "linear");
            },
            function() {
                z_timer = setTimeout(function() {
                    $("#u12").slideToggle("slow", "linear", function () {
                        $("#m2l2").toggleClass("childopen child");
                    });
                }, 10000);
            });
    });

有什么方法可以避免延迟或延迟仅在特定情况下激活？

这是链接:http://jsfiddle.net/stamblerre/XYp48/12/

谢谢!!!

Answer 1

以下是如何使用 hoverIntent jQuery Plugin 中的对象为 hoverIntent 添加超时

$('.selector').hoverIntent({
    over: function(){},
    out: function(){},
    timeout: 1000 // in miliseconds
});

所以这就是它的样子:JSFIDDLE ，即使有时调用 out 函数需要很长时间，所以根据您的情况定义它的最佳用法