0

我编写了以下代码来在鼠标悬停在 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;
}
4

2 回答 2

2

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

$('.sort').hover(function(){
  $('.options').stop(true, true).slideDown('slow');
}, function() {
  $('.options').stop(true, true).fadeOut('fast');
});
于 2012-08-19T11:54:06.810 回答
0

试试 jquery hoverintent 插件。另外，看看这里的好帖子。

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

于 2012-08-19T12:08:19.790 回答