jQuery 帮助与跳跃的下拉菜单

Question

我用 jQuery 编写了这段代码，以便有一个简单的悬停向下滑动菜单。它可以工作，但有时会非常跳动。当您将鼠标在某个位置或稍快滑过它时，它会跳开/关闭并闪烁……不知道如何补救？

这是我当前的代码：

this.navLi = jQuery('nav ul li').children('ul').css("display","block").hide().end();
this.navLi.hover(function() {
    // mouseover
    jQuery(this).find('> ul').stop(true, true).slideDown(100);
}, function() {
    // mouseout
    jQuery(this).find('> ul').stop(true, true).slideUp(100);
});

Answer 1

我建议您试用hoverIntent 插件。它非常适合这样的事情。

这是jsFiddle 上的示例。它非常适合您设置代码的方式。

请注意，您的第一个选择器正在寻找标签<nav>，对吗？

示例
HTML

<div id="nav">
    <ul>
        <li class="head">
            First
            <ul>
                <li>1.1</li>
                <li>1.2</li>
            </ul>
        </li>
        <li class="head">
            Second
            <ul>
                <li>2.1</li>
                <li>2.2</li>
            </ul>
        </li>

    </ul>
</div>

Javascript

jQuery(function() {
    this.navLi = jQuery('#nav ul li').children('ul').css("display","block").hide().end();
    this.navLi.hoverIntent(function() {
        // mouseover
        jQuery(this).find('> ul').slideDown(100);
    }, function() {
        // mouseout
        jQuery(this).find('> ul').slideUp(100);
    });
});

CSS

#nav, #nav ul { list-style: none; }
#nav, #nav * { padding: 0; margin: 0; }
li.head { width: 100px; float: left; border: 1px black solid; }

Answer 2

这是stop方法中second true（参数）的效果，来自文档：

.stop( [ clearQueue ], [ jumpToEnd ] )
clearQueueA 布尔值，表示是否 也可以删除排队的动画。 默认为假。 jumpToEndA 指示是否完成的布尔值 当前动画立即。 默认为假。

只要去掉第二个参数，看看是不是你想要的。