1

親の上にマウスを置くと、<li>各子<li>が個別にフェードインするポップアップサブメニューがあります。マウスが離れると、全体が一度にフェードアウトします。

これまでのところ、非常に悪い jQuery コードを使用して個別にフェードインできますが、1 回しか起動しません。そして、フェードアウトは決して機能しませんでした。ポップアップメニュー全体が同時にフェードインしただけでは機能しませんでした。

これが現在の状態です: 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;
}
4

1 に答える 1

1

このフィドルをチェックしてください

若干の変更はありますが、ご覧いただければお分かりいただけると思います。

$("#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;}

明らかにクリーンアップが必要ですが、それが役立つことを願っています

于 2011-12-07T05:52:34.733 に答える