我的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;
}

刪除它（或只是對其進行修改），您將獲得延遲。

Answer 2

只有這部分弄亂了所有東西。

工作演示http://jsfiddle.net/cse_tushar/wAhTc/6/

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

Answer 3

您正在為菜單使用CSS懸停以及jQuery懸停效果。 您應該只使用其中之一。 以下代碼應從CSS中刪除，以使工作正常。

#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;
}

我建議的另一件事是從您的JS代碼中刪除.delay(100) 。 您已經在使用.fade('slow')達到目的。