Jquery：下拉菜单鼠标悬停和鼠标移出时延迟

Question

我有使用jquery函数的下拉菜单：

$(document).ready(function()
{
    $('li').hover(
    function()
    {
      var timer = $(this).data('timer');
      if(timer) clearTimeout(timer);
      $(this).addClass('over');
    },

    function()
    {
      var li = $(this);
      li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 500));
    });
});

预览：http://jsbin.com/onawur

该功能将在500 ms后隐藏子菜单。我不知道，如何在500毫秒后显示子菜单。请帮忙..

Answer 1

作为现有代码的修改：

$(document).ready(function()
{
    $('li').hover(
    function()
    {
      var timer = $(this).data('timer');
      if(timer) clearTimeout(timer);
      var li = $(this);
      li.data('showTimer', setTimeout(function(){li.addClass('over'); }, 500));
    },

    function()
    {
      var showTimer = $(this).data('showTimer');
      if(showTimer) clearTimeout(showTimer);
      var li = $(this);
      li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 500));
    });
});

Answer 2

似乎是用于去抖动的完美用例

http://code.google.com/p/jquery-debounce/