Delay fadeOut menu jquery

Question

I am new at Jquery and I am trying to make a menu to show up on hover with fadeIn and when the mouse leaves to start a delay and then close the menu with fadeout.

My code so far... I made a jsFiddle too JSFIDDLE

$('#menu > li').on('mouseover', function(e){
  $(this).find("ul:first").stop().fadeIn(120);
  $(this).find('> a').addClass('active');
}).on('mouseout', function(e){
  $(this).find("ul:first").stop().delay(2000).fadeOut(120);
  $(this).find('> a').removeClass('active');
});

Answer 1

Change the sequence of delay and stop and use longer fadeOut duration.

$(this).find("ul:first").delay(2000).stop().fadeOut(500);

Demo: http://jsfiddle.net/tusharj/YGB5G/39/

EDIT

You can also use hover as follow:

$('#menu > li').hover(function (e) {
    $(this).find("ul:first").finish().fadeIn(120);
    $(this).find('> a').addClass('active');
}, function (e) {
    $(this).find("ul:first").finish().delay(1000).fadeOut(1000);
    $(this).find('> a').removeClass('active');
});

Demo: http://jsfiddle.net/tusharj/YGB5G/43/

Answer 2

By using foolowing way you can do fadeOut.

$("#row_id").fadeOut('slow',function(){ $(this).remove(); });

You can also use time in millisecond in place of 'slow' without ''.

Answer 3

You can also achieve this using pure css using the transition property and the :hover selector. The trick is you that you need to use the opacity:0; property instead of the display:none; to hide your sub-menus because you cannot apply transitions on the display property.

#menu ul, #menu2 ul {
...
transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
opacity:0;
}
#menu li:hover > ul, #menu2 li:hover > ul {
    opacity:1
}

Demo: http://jsfiddle.net/YGB5G/42/

Also notice that the second level of dropdown menus is displayed the same way. Which is not the case in other answers.

EDIT

you can use transition-delay: Xs; to add a delay of X seconds to the effect on mouseout. See this post. Here a demo with your code: http://jsfiddle.net/YGB5G/44/