jquery 菜单脚本中的淡入淡出样式

Question

请参阅我已从 WEB 中的某个位置下载了此代码。但我不记得了。不管怎样，我想在鼠标悬停在菜单标题上时向菜单添加淡入淡出效果。当前脚本如下---

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

http://jsfiddle.net/7cEbk/
我想这就是你想要的。

-迈克尔

        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 2

嘿，我只是在 jsFiddle 中搞乱了这个......我认为问题是你在 menu_open() 函数中调用了 menu_close() 。这对 fadeIn() 和 fadeOut() 造成了严重破坏。

这可能不是您的最终解决方案，但它可能会让您朝着正确的方向前进。为了清楚起见，我拆开了链条，请随意重新连接它。

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

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

Answer 3

修改后的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;