2

ナビゲーションバーを作成していて、この効果を追加しようとしています。メインメニュー項目にカーソルを合わせると、その下の各サブメニュー項目が少し遅れて表示されます。次々と好きです。

私はそれをやややりましたが、それは非常にバグがあります。遅延に時間がかかりすぎる場合もあれば、最初のサブアイテムの前に2番目のサブアイテムが表示される場合もあります。そして最悪の場合、メインアイテムからマウスを離すと、その下のリストが消えます！全体として、それほどスムーズではありません。これが私が今持っているコードです。

HTML

<div id="navbar">
    <ul id="main-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Members</a>
            <ul>
                <li><a href="#">Sub item 1</a></li>
                <li><a href="#">Sub item 2</a></li>
            </ul>
        </li>
        <li><a href="#">Events</a>
            <ul>
                <li><a href="#">Sub item 3</a></li>
                <li><a href="#">Sub item 4</a></li>
            </ul>
        </li>
        <li><a href="#">Publications</a>
            <ul>
                <li><a href="#">Sub item 5</a></li>
                <li><a href="#">Sub item 6</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>​

CSS

#navbar { width:550px; height:30px; position:relative; float:right; right:-7px; top:30px; }

#main-menu { width:100%; float:right; list-style:none; }

#main-menu li { float:left; }

#main-menu li a { display:block; text-decoration:none; color:#000; background-color:#FC0; padding:8px; margin-right:10px; }

#main-menu li ul { display:none; z-index:999; }

#main-menu li:hover ul { display:block; position:absolute; }

#main-menu li li { display:block; float:none; }

jQuery

$(document).ready(function(e) {

    $('#main-menu li a').hover(function()
    {
        $(this).animate({
            backgroundColor : '#C60'
        },200);

        $('#main-menu ul li').each(function(e) {
            $(this).delay(e * 200).hide().fadeIn(200);                                     
        });

    }, function(){
        $(this).animate({
            backgroundColor : '#FC0'
        },200);
    });

});​

こちらのフィドルをご覧ください。

どうすればスムーズで機能的なものにできますか？

4

1 に答える 1

1

代わりにCSSトランジションを使用して、メニュー項目をフェードインします（そして背景色を設定します）。あなたがする必要があるのは、最初のロードでjQueryを使用して各子liの遷移遅延を計算することです。例えば：

$('#main-menu li ul li').each(function() {
    var delay = $(this).index() * 200 + 'ms';

    $(this).css({
        '-webkit-transition-delay': delay,
        '-moz-transition-delay': delay,
        '-o-transition-delay': delay,
        'transition-delay': delay
    });                  
});

次に、要素に適切な遷移を設定します。動作するjsFiddleは次のとおりです：http：//jsfiddle.net/Hjxp5/8/

于 2012-11-02T17:27:31.037 に答える