Fading styling in a jquery menu script

See I have downloaded this code from somewhere in the WEB. But I don't remember. Anyway, I want to add fading effect to menu on mouse overing on of menu headers. The current script is as follows---

Jquery Code----

            var timeout         = 500;
            var closetimer      = 0;
            var ddmenuitem      = 0;

            function menu_open()
            {   menu_canceltimer();
                menu_close();
                ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

            function menu_close()
            { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

            function menu_timer()
            {   closetimer = window.setTimeout(menu_close, timeout);}

            function menu_canceltimer()
            {   if(closetimer)
                {   window.clearTimeout(closetimer);
                    closetimer = null;}}

            $(document).ready(function()
            {   $('#menu &开发者_JAVA百科gt; li').bind('mouseover', menu_open);
                $('#menu > li').bind('mouseout',  menu_timer);});

            document.onclick = menu_close;

Html Code -----

<ul id="menu">
<li class="menu_head"><a href="#">JavaScript</a>
    <ul>
        <li><a href="#">Drop Down Menu</a></li>
        <li><a href="#">jQuery Plugin</a></li>
        <li><a href="#">Ajax Navigation</a></li>
    </ul>
</li>
<li  class="menu_head"><a href="#">Effect</a>
    <ul>
        <li><a href="#">Slide Effect</a></li>
        <li><a href="#">Fade Effect</a></li>
        <li><a href="#">Opacity Mode</a></li>
        <li><a href="#">Drop Shadow</a></li>
        <li><a href="#">Semitransparent</a></li>
    </ul>
</li>
<li class="menu_head"><a href="#">Navigation</a></li>
<li class="menu_head"><a href="#">HTML/CSS</a></li>
<li class="menu_head"><a href="#">Help</a></li>
</ul>

I tried just adding FadeIn() and FadeOut() effect but it did not worked. Please help me out with.

Thanks in advance!

http://jsfiddle.net/7cEbk/ I think this is what you want.

-michael

        var timeout         = 500;
        var closetimer      = 0;
        var ddmenuitem      = 0;

        function menu_open()
        {   menu_canceltimer();
            menu_close();
            ddmenuitem = $(this).find('ul').eq(0).hide().fadeIn();}

        function menu_close()
        { if(ddmenuitem) ddmenuitem.show().fadeOut('fast');}

        function menu_timer()
        {   closetimer = window.setTimeout(menu_close, timeout);}

        function menu_canceltimer()
        {   if(closetimer)
            {   window.clearTimeout(closetimer);
                closetimer = null;}}

        $(document).ready(function()
        {   $('#menu > li').bind('mouseover', menu_open);
            $('#menu > li').bind('mouseout',  menu_timer);
        });

        document.onclick = menu_close;

Hey there, I was just messing around with this in jsFiddle... I think the problem was that you were calling menu_close() in your menu_open() function. This was causing havoc with fadeIn() and fadeOut().

This probably won't be your final solution, but it might get you going in the right direction. I broke apart the chaining for clarity, feel free to reconnect it.

function menu_open() {
    menu_canceltimer();
    ddmenuitem = $(this).find('ul').eq(0);
    ddmenuitem.fadeIn('slow');
}

function menu_close() {
    if(ddmenuitem) {
        ddmenuitem.fadeOut('slow');
    }
}

Modifed JS

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function menu_open() {
    menu_canceltimer();
    menu_close();
    ddmenuitem = $(this).find('ul').eq(0).fadeIn('slow');
}

function menu_close()
{ if (ddmenuitem) ddmenuitem.fadeOut('slow'); }

function menu_timer()
{ closetimer = window.setTimeout(menu_close, timeout); }

function menu_canceltimer() {
    if (closetimer) {
        window.clearTimeout(closetimer);
        closetimer = null;
    } 
}

$(document).ready(function () {
    $('#menu > li').bind('mouseover', menu_open);
    $('#menu > li').bind('mouseout', menu_timer);
});

document.onclick = menu_close;