javascript - 不稳定悬停时菜单和子菜单的行为不符合预期

Question

我有一个水平菜单(设置为列表)，当您将鼠标悬停在其中一个列表项上时，它会动画显示一个下拉菜单，该菜单是该列表项的子项。

如果您以“正常”速度将光标移动到菜单上，则效果很好。我遇到的问题是如果您不规则地将光标移动到菜单上，菜单的行为。它使之前悬停的元素仍然显示，我必须将鼠标悬停在 dropMenu 上并移出，直到它们全部返回到初始状态(高度:0)。

我的菜单 jquery 如下:

$('#templateNav > ul > li').bind({
        mouseenter: function() {
            $(this).find(".dropMenu").clearQueue().animate({
                height: 250
            }, 200);
        },

        mouseleave: function() {
            $(this).find(".dropMenu").clearQueue().height(0);
        }
    });

这是我的菜单代码的示例:

<div id='templateNav'>
    <ul>
        <li>Menu 1<span class='dropMenu'>...</span></li>
        <li>Menu 2<span class='dropMenu'>...</span></li>
        <li>Menu 3<span class='dropMenu'>...</span></li>
    </ul>
</div>

有什么想法吗？

Answer 1

查看此http://jsbin.com/ukuqik/1

$('#templateNav > ul > li').bind({
    mouseenter: function() {
        $(this).find(".dropMenu").stop(true,true).animate({
            height: 250
        }, 200);
    },

    mouseleave: function() {
        $(this).find(".dropMenu").stop(true,true).animate({
            height: 0
        }, 200);
    }
});

更好一点:http://jsbin.com/ukuqik/6