jQuery帮助Jumpy slidedown菜单

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 布尔值表示是否   也删除排队的动画。   默认为false。的 jumpToEndA   指示是否完成的布尔值   立即动画当前动画。   默认为false。

只需删除第二个参数，看看这是否是你想要的。