admin 管理员组

文章数量: 1086019

I have one drop down menu,

<ul>
<li><a>link 1</a>
<ul><li><a>link 1</a></li></ul>
</li>
</ul>

I am using the following JS to use hover and show child menus.

I want to add delay to the mouse out function (when the class of the LI removed) about 500ms,

 $('li').hover(function(){
    $(this).addClass('over');
    }, function(){
    $(this).removeClass('over');
  });

Please do needful in this.

thanks in advance

I have one drop down menu,

<ul>
<li><a>link 1</a>
<ul><li><a>link 1</a></li></ul>
</li>
</ul>

I am using the following JS to use hover and show child menus.

I want to add delay to the mouse out function (when the class of the LI removed) about 500ms,

 $('li').hover(function(){
    $(this).addClass('over');
    }, function(){
    $(this).removeClass('over');
  });

Please do needful in this.

thanks in advance

Share Improve this question asked May 10, 2010 at 9:21 Wasim ShaikhWasim Shaikh 7,04018 gold badges62 silver badges88 bronze badges 1
  • possible duplicate of Delay jquery hover event? – zaf Commented May 10, 2010 at 9:25
Add a ment  | 

2 Answers 2

Reset to default 7

You can do something like this:

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

This clears any timeout when hovering over it (in case you hover, leave, hover back you need to check this) and sets a 500ms delay when leaving the hover, storing the timeout ID on the li itself using .data().

$('li').hover(function(){
    $(this).addClass('over');
    }, function(){
    setTimeout(function(){$(this).removeClass('over')}, 500);
  });

本文标签: javascriptAdding delay to mouse out functionStack Overflow