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')来实现此目的。

我的jQuery淡入效果不起作用

3 个答案: