Question

我的jQuery代码是：

$(document).ready(function () {
    $('.selector').mouseenter(function () {
        $(this).find('> ul').slideToggle('fast');
    });
    $('.selector').mouseleave(function () {
        $(this).find('> ul').slideToggle('fast');
    });
});

在工作中：

http://jsfiddle.net/Reuben/Au7LA/1/

我的代码有效，但如果您不小心，可以快速攻击打开关闭面板。那么有没有延迟，或者更确切地说有什么可以防止这种情况发生？

Answer 1

$(document).ready(function () {
    $('.selector').mouseenter(function () {
        $(this).find('> ul').stop().slideToggle('fast');
    });
    $('.selector').mouseleave(function () {
        $(this).find('> ul').stop().slideToggle('fast');
    });
});

http://jsfiddle.net/Au7LA/3

也许可能对debouncing插件有用http://benalman.com/code/projects/jquery-throttle-debounce/docs/files/jquery-ba-throttle-debounce-js.html

更新（使用去抖动）：

$(document).ready(function () {
    var toggle = function (show) {
        return function () {
            var $el = $(this);
            var isHovered = $el.is(':hover');
            var animation = show && isHovered ? 'slideDown' : 'slideUp';
            $el.children('ul').stop()[animation]('fast');
        };
    }
    var mouseenter = $.debounce(400, toggle(true));
    var mouseleave = toggle(false);
    $('.selector')
        .on('mouseenter', mouseenter)
        .on('mouseleave', mouseleave);
});

http://jsfiddle.net/vpetrychuk/4C6CV/

Answer 2

你可以试试这个：

 $(document).ready(function () {
$('.selector').mouseenter(function () {
    $(this).find('> ul').hide().slideDown('fast');
});
$('.selector').mouseleave(function () {
    $(this).find('> ul').hide().slideUp('fast');
 });
});

这个小提琴：http://jsfiddle.net/Au7LA/5/

重复事件以及如何避免

2 个答案:

更新（使用去抖动）：