jQuery delay function with dropdown menu

Question

<ul id="mainNav">
  <li> <a href="#" class="greenTheme">MainNav</a>
    <ul class="subNav gTheme">
      <li class="first"><a href="#">SubNav1</a><span></span></li>
      <li><a href="#">SubNav2</a><span></span></li>
    </ul>
  </li>
</ul>

I am developing a dropdown menu with jQuery hover function. I need to put delay on the hide function. I am using the following piece of code.

//Show/Hide
$('#mainNav > li').each(function(e){
$(this).hover(function(){
    $(this).find('ul.subNav').show();
}, function(){
    $(this).find('ul.subNav').delay(100000).hide();     
    });
});

I used the delay function here but it is not working as expected. Please help. Thanks in advance.

I'll be the first to mention hoverIntent.

Blazemonger
– Blazemonger

2011-12-20 15:08:30 +00:00
Commented Dec 20, 2011 at 15:08 — Blazemonger
– Blazemonger, Commented Dec 20, 2011 at 15:08

sirmdawg · Accepted Answer · 2011-12-20 15:27:26Z

1

You can add hide to the animation queue by adding a duration. As mentioned above without any duration it will not become a part of the queue or "stack". Check out this jsFiddle: http://jsfiddle.net/mkprogramming/hyEC5/#base

//Show/Hide
$('#mainNav > li').each(function(e){
  $(this).hover(function(){
    $(this).find('ul.subNav').show(); //fadeIn();
  }, function(){
    $(this).find('ul.subNav').delay(1000).hide(1);    //fadeOut();
  });
});

Since you're using jQuery i'd use fadeIn() and fadeOut for a much more professional effect.

answered Dec 20, 2011 at 15:27

sirmdawg

2,5813 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jantimon · Accepted Answer · 2011-12-20 15:10:09Z

0

To add show or hide to the jQuery animation queue you have to use an animation duration (eg 1ms)

$(this).find('ul.subNav').delay(100000).hide(1);

http://api.jquery.com/show/

When a duration is provided, .show() becomes an animation method. The .show() method animates the width, height, and opacity of the matched elements simultaneously.

answered Dec 20, 2011 at 15:10

jantimon

38.5k23 gold badges127 silver badges195 bronze badges

Comments

Sudhir Bastakoti · Accepted Answer · 2011-12-20 15:12:54Z

0

Just a suggestion, you could use HoverIntent for that, it would be much better. Sample: http://www.thatsquality.com/articles/creating-delayed-drop-down-menus-in-jquery-without-losing-accessibility

answered Dec 20, 2011 at 15:12

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

Collectives™ on Stack Overflow

jQuery delay function with dropdown menu

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related