jquery submenu <li> 在悬停时一个接一个地淡入

Question

我有一个弹出子菜单，当您将鼠标悬停在父 <li> 上时，每个子 <li> 会单独淡入。当您的鼠标离开时，整个画面会立即淡出。

到目前为止，我可以使用非常糟糕的 jQuery 代码单独淡入它们，但它只会触发一次。而fadeOut 从来没有奏效过。当我让整个弹出菜单同时淡入时，它从来没有用过。

这是当前状态：http://www.fixxed.net/test/pg/carousel/profiles.html

这是 jQuery 代码：

$('#menu li').hover(
        function () {
            //show its submenu

            $('ul .1', this).hide().stop(true, true).fadeIn(700);
            $('ul .2', this).hide().stop(true, true).delay(300).fadeIn(700);
            $('ul .3', this).hide().stop(true, true).delay(600).fadeIn(700);
            $('ul .4', this).hide().stop(true, true).delay(900).fadeIn(700);
            $('ul .5', this).hide().stop(true, true).delay(1200).fadeIn(700);
            $('ul .6', this).hide().stop(true, true).delay(1500).fadeIn(700);

        }, 
        function () {
            //hide its submenu
            $('ul', this).stop(true, true).fadeOut(700);            
        }

这是 HTML 的简化版本：

<li class="about"><a href="#"></a>
       <ul>
            <li class="6"><a href="../paul-gregory-photography-bio.html">BIO</a></li>
            <li class="5"><a href="../paul-gregory-photography-clients.html">CLIENTS</a></li>
            <li class="4"><a href="#">THE SESSION</a></li>
            <li class="3"><a href="../paul-gregory-photography-pricing.html">Pricing</a></li>
            <li class="2"><a href="#">THINGS PAUL SAYS</a></li>
            <li class="1" style="padding-bottom:5px"><a href="#">Interview</a></li>
       </ul>
</li>  

我相信鼠标离开时它没有淡出的原因是因为 CSS。 CSS 有很多功能，因为它是一个弹出菜单，而不是下拉菜单，但这里都是（除了 sprite 的东西）：

#menu li ul li a {
    display:block;
    text-decoration:none;
    text-align:left;
    width:100%;
    height:100%;
    background:#000;
}
#menu ul {
    padding:0;
    margin:0;
    list-style-type: none;
}
#menu ul li {
    float:left;
    position:relative;
    display:inline;
}
#menu ul li ul {
    visibility:hidden;
    position:absolute;
    color:#FFFFFF
}
#menu table {
    border-collapse:collapse;
    margin:0;
    padding:0;
    font-size:1em;
    margin:-1px;
}
#menu ul li:hover a, #menu ul li a:hover {
    color:#000;
}
#menu ul li:hover ul, #menu ul li a:hover ul {
    visibility:visible;
    bottom:26px;
    left:5px;
}
.display {
    display:block;
    width:150px;
    height: 18px;
    clear:both;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    font-style:italic
}
#menu ul li:hover ul li, #menu ul li a:hover ul li {
    display:block;
    width:150px;
    height: 18px;
    clear:both;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    font-style:italic
}
#menu ul li:hover ul li ul, #menu ul li a:hover ul li a ul {
    visibility:hidden;
    position:absolute;
}
#menu ul li:hover ul li a, #menu ul li a:hover ul li a {
    display:block;
    color:#DAC4AF;
    width:100%;
    padding-left:0px;
}
#menu ul li:hover ul li a:hover, #menu ul li a:hover ul li a:hover {
    color:#FFF;
}
#menu ul li:hover ul li:hover ul, #menu ul li a:hover ul li a:hover ul {
    visibility:visible;
    left:210px;
    bottom:0;
}
#menu ul li:hover ul li:hover ul li a, #menu ul li a:hover ul li a:hover ul li a {
    color:#000;
}
#menu ul li:hover ul li:hover ul li a:hover, #menu ul li a:hover ul li a:hover ul li a:hover {
    color:#000;
}
#menu ul li:hover ul.left, #menu ul li a:hover ul.left {
    left:-105px;
}
#menu ul li:hover ul li:hover ul.left, #menu ul li a:hover ul li a:hover ul.left {
    left:-210px;
    width:209px;
}
.menu li {
    text-indent:-9999px;
    display:inline;
    float:left;
    position:relative
}
.menu li a {
    background:url(assets/menu.png) no-repeat;
    width:100%;
    height:100%;
    display:block;
}

Answer 1

Check out this fiddle

有些事情发生了变化，但我认为当你看到它时我会明白的。

$("#fader").hide();     

    $('#menu li').hover(
        function () {
            //show its submenu
            $('ul',this).show() //Show the sub ul you hide in the mouse out
            $('ul .1', this).hide().stop(true, true).fadeIn(700);
            $('ul .2', this).hide().stop(true, true).delay(300).fadeIn(700);
            $('ul .3', this).hide().stop(true, true).delay(600).fadeIn(700);
            $('ul .4', this).hide().stop(true, true).delay(900).fadeIn(700);
            $('ul .5', this).hide().stop(true, true).delay(1200).fadeIn(700);
            $('ul .6', this).hide().stop(true, true).delay(1500).fadeIn(700);

        }, 
        function () {
            //hide its submenu
            $('ul', this).fadeOut(700);            
        }
    );

您没有看到淡出的原因是因为在您的 CSS 中，您在鼠标移出时明显发送到隐藏。所以我改写了这条规则。

#menu ul li ul, #menu ul li:hover ul, #menu ul li a:hover ul {visibility:visible; bottom:26px; left:5px; display:none;}

显然需要清理，但我希望它有所帮助