0

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>

查询

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

4

3 回答 3

5

这个 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;
}

删除它（或只是修改它），你会得到你的延迟。

于 2013-07-19T09:43:02.643 回答
0

只有这一部分把所有的事情都搞砸了。

工作演示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;
}
于 2013-07-19T09:48:35.407 回答
0

您正在为您的菜单使用 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;
}

我建议的另一件事是.delay(100)从您的 JS 代码中删除。您已经在使用.fade('slow')它来达到目的。

于 2013-07-19T09:50:38.017 回答