jquery - 如何防止我的菜单系统发生 jQuery 事件堆叠？

Question

我构建了一个使用悬停功能来显示子菜单项的菜单。有几位 parent 有 child ，一位有孙子。我的问题是，如果您快速将鼠标悬停在父菜单项上几次，然后将鼠标移开，它们将继续淡入和淡出。

这很烦人，我怎样才能阻止它？

jQuery 目前看起来像这样:

$(document).ready(function(){
        $('menu li').hover(function () {
                $(this).children('ul').fadeIn();
            }, function () {
                $(this).children('ul').fadeOut(5000);
            });
    });

我已将其全部弹出到 jsfiddle 中:http://jsfiddle.net/8gsb5/

任何帮助将不胜感激，谢谢。

Answer 1

尝试.stop(true,true)

$(document).ready(function () {
    $('menu li').hover(function () {
        $(this).children('ul').stop(true, true).fadeIn();
    }, function () {
        $(this).children('ul').stop(true, true).fadeOut(5000);
    });
});

fiddle Demo