jQuery $ .hover用于导致"弹跳"的子菜单

Question

我在使用jQuery悬停方法时遇到了一些麻烦.

这是相关的JavaScript代码:

$("#navigation > li > ul").hide();
$("#navigation > li").hover(
    function() {
        $(this).children("ul").slideDown(125);
    },
    function() {
        $(this).children("ul").slideUp(125);
    }
);

这是相应的HTML:

<ul id="navigation">
    <li><a href="#">Top Level Item #1</a></li>
    <li>
        <a href="#">Top Level Item #2</a>
        <ul>
            <li><a href="#">Sub-Menu Item #2-1</a></li>
            <li><a href="#">Sub-Menu Item #2-2</a></li>
            <li><a href="#">Sub-Menu Item #2-3</a></li>
        </ul>
    </li>
</ul>

每当您将鼠标悬停在顶级项目上时,其中的子菜单(如果有)将下拉,并具有漂亮,快速的幻灯片效果.问题是,当你快速将鼠标放置"到"菜单,让您的鼠标在菜单会是,但还没有达到:那么菜单将达到鼠标悬停动画的"结束",并反弹到隐藏状态,并重复,直到从下拉菜单中删除鼠标.

Answer 1

也许在mouseout函数中添加一个检查可以帮助:

if( !$(this).children("ul").is(":animated") ){
  $(this).children("ul").slideUp(125);
}