Jquery下拉菜单mouseenter延迟

Question

所以我有一个带有jquery的下拉菜单，它使用了向下和向上滑动功能。

$(document).ready(function(){
    $('#menu>li').mouseenter(function(){
        $(this).find('ul>li').slideDown(250);
        $(this).find('ul>li').css('position', 'relative');
        $(this).find('ul>li').css('z-index', 9999);
    });
    $('#menu>li').mouseleave(function(){
        $(this).find('ul>li').slideUp(250);
        $(this).find('ul>li').css('position', 'relative');
        $(this).find('ul>li').css('z-index', 9999);
    });
});

我怎样才能使我的mouseleave函数执行后，在mouseenter函数再次注册之前有一段延迟？

提前致谢！

Answer 1

声明一个初始超时为0的变量，一旦进入mouseleave函数，将其更新为您想要延迟的值。

修改
使用clearTimeout清除以前创建的超时。

$(document).ready(function(){
    var delay=0;
    var timeout;
    $('#menu>li').mouseenter(function(){
      timeout= setTimeout(function(){
        $(this).find('ul>li').slideDown(250);
        $(this).find('ul>li').css('position', 'relative');
        $(this).find('ul>li').css('z-index', 9999);
      },delay);
    });
    $('#menu>li').mouseleave(function(){
        if(typeof timeout!=='undefined'){
          clearTimeout(timeout);
        }
        delay=250;
        $(this).find('ul>li').slideUp(250);
        $(this).find('ul>li').css('position', 'relative');
        $(this).find('ul>li').css('z-index', 9999);
    });
});