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有很多内容，因为它是一个弹出式菜单而不是下拉菜单，但这一切都是（除了精灵的东西）：

#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中你已经发现隐藏在mouseout上了。所以我用。覆盖了这条规则。

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

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

jquery子菜单<li>在悬停时一个接一个地淡出</li>

1 个答案: