我的jQuery淡入效果不起作用

Question

使用jQuery的这种淡入/淡出效果不起作用.我没有收到错误.菜单完美呈现并正常工作但悬停时菜单没有延迟或淡入淡出.这是工作的FIDDLE.我正在使用jQuery 1.9.1.我不想发布CSS,因为它太大而且会占用.我认为的问题是jQuery而不是CSS.

HTML

<ul id="nav">
    <li><a href="#">1 HTML</a>
    </li>
    <li><a href="#">2 CSS</a>
    </li>
    <li><a href="#">3 Javascript </a>

        <ul>
            <li><a href="#">3.1 jQuery</a>

                <ul>
                    <li><a href="#">3.1.1 Download</a>
                    </li>
                    <li><a href="#">3.1.2 Tutorial</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a>
            </li>
            <li><a href="#">3.3 Prototype</a>
            </li>
        </ul>
    </li>
</ul>

JQUERY

$(document).ready(function () {
    $(" #nav li").hover(

    function () {
        $(this).find('ul:first').stop(true, true).delay(1000).fadeIn("slow")
    }, function () {
        $(this).find('ul:first').stop(true, true).delay(1000).fadeOut("slow");
    }

    )

});

CSS

Answer 1

这个CSS部分搞乱了你的JS:

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
    display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
    display:block;
}

删除它(或只是修改它),你会收回你的延迟.