Question

请参阅我从WEB中的某个位置下载了此代码。但我不记得了。无论如何，我想在菜单标题上添加鼠标悬停菜单时添加淡化效果。目前的脚本如下---

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

嘿那里，我只是在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 2

修改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 3

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;

在jquery菜单脚本中淡化样式

3 个答案: