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); 
    }); 
});