Jquery menu fadeIn fadeOut with Timer

Question

I have the menu created as below

CSS

#menu, #menu2, #container
{
    width: 100%;
    margin: 0;
    padding: 1px 0 0 0;
    list-style: none;  
    background: #111;
}

#menu li, #menu2 li
{
    float: left;
    padding: 0 0 0 0;
    position: relative;
    line-height: 0;
}

#menu a, #menu2 a 
{
    float: left;
    height: 25px;
    padding-top: 0; /* "" */
    padding-bottom: 0; /* "" */
    padding-left: 10px;
    padding-right: 10px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
}

#menu li:hover > a, #menu2 li:hover > a
{
    color: #fafafa;
}


#menu li a:hover,  #menu2 li a:hover /* IE6 */
{
    color: #fafafa;
}

#menu li:hover > ul, #menu2 li:hover > ul
{
    /*display: block;*/
}

/* Sub-menu */

#menu ul, #menu2 ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 40px; /* "": 50px */
    left: 0;
    z-index: 99999;    
    background: #444;   
}

#menu ul ul, #menu2 ul ul
{
  top: 0px;
  left: 195px; /* "": 160px */
}

#menu ul li, #menu2 ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child, #menu2 ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

#menu ul a, #menu2 ul a
{    
    padding: 10px;
    height: 10px;
    width: 165px; /* "" */
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#menu ul a, #menu2 ul a /* IE6 */
{    
    height: 10px;
}

*:first-child+html #menu ul a, *:first-child+html #menu2 ul a /* IE7 */

{    
    height: 10px;
}

#menu ul a:hover, #menu2 ul a:hover
{
    background: #0186ba;
}

#menu ul li:first-child > a, #menu2 ul li:first-child > a
{
}

#menu ul li:first-child > a:after, #menu2 ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 10px;
    top: -15px; /* "" */
    width: 0;
    height: 0;
    border-left: 12px solid transparent; /* "" */
    border-right: 12px solid transparent; /* "" */
    border-bottom: 16px solid #444; /* "" */
}

/*#menu ul ul li:first-child a:after, #menu2 ul ul li:first-child a:after
{
    left: -10px; /* "" */
    /*top: 5px; /*Syed*/
    /*width: 0;
    height: 0;
    border-left: 0; 
    border-bottom: 12px solid transparent; /* "" */
    /*border-top: 12px solid transparent; /* "" */
    /*border-right: 16px solid #444; /* "" */*/*/
}*/

#menu ul li:first-child a:hover:after, #menu2 ul li:first-child a:hover:after
{
    border-bottom-color: #0186ba; 
}

#menu ul ul li:first-child a:hover:after, #menu2 ul ul li:first-child a:hover:after
{
    border-right-color: #0186ba; 
    border-bottom-color: transparent;   
}


#menu ul li:last-child > a, #menu2 ul li:last-child > a
{
}

/* Clear floated elements */
#menu:after, #menu2:after
{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html #menu, * html #menu2             { zoom: 1; } /* IE6 */
*:first-child+html #menu, *:first-child+html #menu2 { zoom: 1; } /* IE7 */    

HTML

<ul id="menu">
    <li><a href="">Home</a></li>
    <li>
        <a href="#">ABCD</a>
        <ul>
            <li>
                <a href="">About My Com</a>
            </li>
            <li>
                <a href="">News </a>
            </li>
            <li>
                <a href="">Board</a>                
            </li>
            <li>
                <a href="#">Core </a>
                <ul>
                    <li><a href="/Pages/membersip.aspx">Membership</a></li>
                    <li><a href="/Pages/investmets.aspx">Inves</a></li>
                    <li><a href="/Pages/benefit.aspx">Ben</a></li>
                    <li><a href="/Pages/students.aspx">Students Loan</a></li>
                </ul>               
            </li>
            <li>
                <a href="/Pages/executive-committee.aspx">Executive </a>
            </li>
            <li>
                <a href="/Pages/mission-and-vision.aspx">Mission </a>               
            </li>
        </ul>
    </li>
    <li><a href="/Pages/statis.aspx">Stat</a></li>
    <li><a href="/Pages/news.aspx">News</a></li>
    <li><a href="/Pages/file-s.aspx">Reso</a></li>
    <li>
        <a href="#">Self </a>
        <ul>
            <li>
                <a href="#">Benefit </a>
            </li>
            <li>
                <a href="#">Employer </a>
            </li>
            <li>
                <a href="#">Member </a>
            </li>
        </ul>
    </li>
    <li><a href="/Pages/faqs.aspx">FAQs</a></li>
    <li>
        <a href="#">Contact Us</a>
        <ul>
            <li>
                <a href="/Pages/contac.aspx">Contact</a>
            </li>
            <li>
                <a href="/Pages/.aspx">Customer Service </a>
            </li>
            <li>
                <a href="/Pages/te.aspx">Telephone </a>
            </li>
            <li>
                <a href="/Pages/lmap.aspx"> Map</a>
            </li>
        </ul>
    </li>

</ul>

JQuery

  $("#menu li").hover(
    function () {
      $(this).children("ul").fadeIn();
    },
   function () {
     timer = setInterval(function () {
        $(this).children("ul").delay(1000).fadeOut();
     }, 1000);   
     clearInterval(timer);
   });

Please go to this link to check the code http://jsfiddle.net/hufsC/2/

My questions is when I hover on the menu it should fadeIn slowly and when hover out it should fadeOut slowly. I am also trying to use a timer so that when the user hovers on it, it doesn't fadeIn or fadeOut repeatedly. It should be once only. Can anyone give some expert advices?

Answer 1

  $("#menu li").hover(
    function () {
      $(this).children("ul").finish().fadeIn();
    },
   function () {
        $(this).children("ul").finish().delay(1000).fadeOut();
   });

http://jsfiddle.net/dXAcR/1/

Answer 2

I have create a demo here You may change the timings for fadeout.

The code is as follows:

$(document).ready(function(){
  $('ul#menu > li').hover(
    // mouseover
    function(){
      $(this).find('>ul').fadeIn('fast');
    },
    // mouseout
    function(){
  var el=this;
  setTimeout( function(){
    $(el).find('>ul').fadeOut('fast')
    }, 1000 );
}
  );
});