CODEWITHSUNDEEP
jquerydrop-down-menu
Zul
Zul

Reputation: 3608

Jquery: Dropdown Menu Delay when mouse over and mouse out

I have dropdown menu using jquery function like this:

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

Preview: http://jsbin.com/onawur

The function will hide sub menu after 500 ms. I have no idea, how to make submenu show after 500 ms too. Please help..

Upvotes: 1

Views: 3652

Answers (2)

Shad
Shad

Reputation: 15451

As a modification of your existing code:

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

Upvotes: 1

John
John

Reputation: 975

Seems like a perfect use-case for debouncing

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

Upvotes: 0

Related Questions