Стилизация исчезновения в скрипте меню jquery

Question

Смотрите, я скачал этот код где-то в сети.Но я не помню.В любом случае, я хочу добавить эффект затухания в меню при наведении мыши на заголовки меню.Текущий скрипт выглядит следующим образом: ---

Код Jquery ----

            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 > li').bind('mouseover', menu_open);
                $('#menu > li').bind('mouseout',  menu_timer);});

            document.onclick = menu_close;

Код HTML -----

<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>

Я попытался просто добавитьFadeIn() и FadeOut() эффект, но это не сработало.Пожалуйста, помогите мне с.

Заранее спасибо!

Answer 1

Модифицированный 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;

Answer 2

http://jsfiddle.net/7cEbk/ Я думаю, это то, что вы хотите.

-mikhael

        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;

Answer 3

Привет, я просто возился с этим в jsFiddle ... Я думаю, проблема была в том, что вы вызывали menu_close () в вашей функции menu_open (). Это вызывало хаос с fadeIn () и fadeOut ().

Возможно, это не будет вашим окончательным решением, но оно может привести вас в правильном направлении. Я разорвал цепочку для ясности, не стесняйтесь снова подключить ее.

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

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