Javascript no delay on menu items, but 5 second delay when hover off menu

Question

i have a dropdown menu and i want to be able to hover over each drop down, with 0.3sec delay, but when you roll off the menu i want it to pause 2sec before fading out.

The markup:

<ul class="mainnav">
    <li><a href="#">item 1</a>
        <ul class="sub">
            <li><a href="#">item a</a></li>
            <li><a href="#">item b</a></li>
            <li><a href="#">item c</a></li>
        </ul>
    </li>
    <li><a href="#">item 2</a>
        <ul class="sub">
            <li><a href="#">item d</a></li>
            <li><a href="#">item e</a></li>
            <li><a href="#">item f</a></li>
        </ul>
    </li>
</ul>

The jquery:

function(){
    $('.mainnav > li').hover(
        function () {
             $(this).find('sub').fadeIn(300);
             },
        function () {
             $(this).find('sub').fadeOut(300);
        }
    );
    $('.mainnav').mouseout( function() {
        setTimeout(function() {
           $(this).find('sub').fadeOut(300);
        }, 2000);
    });
}

So, if i rollover 'item 1' it drops down and shows 'item a', 'item b', 'item c'. If i roll over 'item 2' it drops down and shows 'item d', 'item e', item f'.

Now if i roll out of '.mainnav' i want the rolled over drop down to delay before fading out.

But thats not what it's doing. It's just fading out, like rolling over another menu item.

Thanks in advance.

Answer 1

You're using the selector in a wrong way. $('sub') will look for a tag named sub, but you want to find an element with class sub, you should be using $('.sub'). This alone will not fix your issue. Try following code

       $('.mainnav > li').hover(
           function () {
              $(this).find('.sub').fadeIn(300);
           },
           function () {
              var sub = $(this).find('.sub');
              setTimeout(function () {
                 sub.fadeOut(300);
              }, 2000)

           }
        );

And you don't need a separate mouseout event handler for the .mainnav. The second argument of jquery hover is a mouseout handler.

And for sake of describing my answer, var sub = $(this).find('.sub'); is created to save a reference to the hovered .sub and pass it to the function because this inside an anonymous function will refer to the window object

Update

Following code is to prevent the fadeout+fadein if the user moves the mouse away from menu and hovers it again before the menu has fadedout completely.

        $('.mainnav > li').hover(
           function () {

              //this clears the timeout that is going to cause a fadeout
              window.clearTimeout(window.menufade);

              $(this).find('.sub').fadeIn(300);
           },
           function () {
              var sub = $(this).find('.sub');

              //this clears the timeout that is going to cause a fadeout, not necessary here I think, but i'll let it be :)
              window.clearTimeout(window.menufade);

              window.menufade = setTimeout(function () {
                 sub.fadeOut(300);
              }, 2000)

           }
        );