Question

当鼠标悬停在LI项目上时，我制作了以下代码来展开菜单，并在鼠标离开LI时隐藏菜单。

$('.sort').bind('mouseenter',function(){
    $('.options').slideDown('slow');
}).bind('mouseleave',function(){
    $('.options').fadeOut('fast');
});

.sort是li项的类。 .options是孩子UL。代码工作正常，因为当我将鼠标移动到列表项目上时，它会扩展菜单，当我离开项目时，它会淡出。但是如果我将鼠标快速移动到项目中，我就会出现不一致的切换/褪色。它会创建一个无限的淡入淡出/切换如何修复它？

对不起伙计们，HTML：

        <ul id="options">
            <li class="sort"><a href="#" class="sort-link"><?php _e('Shop by Brand','onecart'); ?></a>
                <ul class="options">
                    <li><a href="#">Latest Arrivals</a></li>
                    <li><a href="#">For Men</a></li>
                    <li><a href="#">For Women</a></li>
                    <li><a href="#">For Kids</a></li>
                    <li><a href="#">On Sale</a></li>
                </ul>
            </li>
        </ul>

css：

#options li.sort {
    position: relative;
    padding: 0 0 8px 0;
}
#options li.sort .sort-link {
    display: block;
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    color: #686868;
    text-transform: uppercase;
    text-shadow: 0 1px #eee;
    background: url(../img/arrow-list.png) no-repeat right top;
    padding: 0 16px 0 0;
}
#options li.sort .sort-link:hover {color: #000}
#options li.sort .current {
    color: #000;
    background-position: right bottom;
}

ul.options {
    display: none;
    position: absolute;
    background: #fff;
    top: 36px;
    left: 0;
    width: 180px;
    padding: 6px 0;
    border-top: 3px solid #ea6ea0;
    box-shadow: 0 1px 2px #aaa;
    z-index: 4;
}

Answer 1

使用.stop(true, true)删除排队的动画并立即完成当前动画：

$('.sort').hover(function(){
  $('.options').stop(true, true).slideDown('slow');
}, function() {
  $('.options').stop(true, true).fadeOut('fast');
});

Answer 2

尝试使用jquery hoverintent plugin。另外，请看a good post here。

如果您正在处理任何类型的下拉式超级菜单，这将证明几乎是必要的，除非您想要使用超时和光标装箱编写自己的延迟鼠标悬停实现。

当我移动鼠标太快时，如何解决这个不一致的下拉切换？

2 个答案: