0

私はこのHTMLコードを持っています:

<ul class="menu">
    <li>Home <span class="icon home"></span><div class="clear"></div></li>
    <li class="sub">Projects <span class="icon project"></span>
        <div class="clear"></div>
        <ul class="sub-menu">
            <li>Mfrsht.com</li>
            <li>Mawsuaty.com</li>
            <li>Dzlng.com</li>
            <li>Money(Ctrl)</li>
        </ul>
    </li>
    <li>Ideas <span class="icon idea"></span><div class="clear"></div></li>
    <li>Services <span class="icon service"></span><div class="clear"></div></li>
    <li>About us <span class="icon about"></span><div class="clear"></div></li>
    <li>Contact <span class="icon contact"></span><div class="clear"></div></li>
</ul>

そしてこのJavascriptコード:

$(".menu > li").not(".menu > li.sub").css( {backgroundPosition: "0px 0px", height: "30px"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(-167px 0px)", height: "36px"}, {duration:500})     
            })      
        .mouseout(function(){           
            $(this).stop().animate({backgroundPosition:"(0px 0px)", height: "30px"}, {duration:200, complete:function(){                $(this).css({backgroundPosition: "0px 0px"})            
            }})     
})

$(".menu > li.sub").css( {backgroundPosition: "0px 0px"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(-167px 0px)"}, {duration:500}) 
            })      
        .mouseout(function(){           
            $(this).stop().animate({backgroundPosition:"(0px 0px)"}, {duration:200, complete:function(){                $(this).css({backgroundPosition: "0px 0px"})        
            }})     
})


$(".sub").hover(function() {
            $(this).animate({height: "150px"}, "slow", "", function () {
                $(this).children("ul.sub-menu").slideDown("slow");  
                });

    }, function() {
        $(this).animate({height: "30px"}, "slow");
        $(this).children("ul.sub-menu").slideUp("slow");    
        });

メニューは正常に動作していますが、ラグや遅延がある場合があるため、改善して改善したいと考えています。

注: バックグラウンド ポジション プラグインを使用しています。

デモ

助言がありますか?または、これは良いことであり、変更する必要はないと思いますか?

4

1 に答える 1

4

考慮すべきいくつかの事柄:

  1. mouseover/mouseoutの代わりにmouseenter/mouseleaveを使用して、必要に応じてハンドラーを実際に起動します(museがメニュー項目の領域内でカーソルを移動するかどうかは気にしないため、どの項目のカーソルが出入りするかのみ)。
  2. .stop(true)イベントハンドラーで新しいアニメーションを実行する前に使用します。あなたはすでにいくつかの場所でそれを行っていますが、いくつかの場所を逃しています(そしてあなたはアニメーションキューをクリアしていません)。メニュー全体でカーソルをランダムに動かしてから、停止して混乱を観察してください。イベントハンドラーがあちこちで発生し、一部のアイテムは「ホバリング」し、一部のアイテムはサブメニューを表示していますが、1秒後に非表示になります。停止関数に渡すtrueことで、一致したオブジェクトのアニメーションキューをクリアするようにjQueryに指示します。.stop()また、の2番目の引数の使用を検討することもできます。jQueryは先に進み、アニメーション全体を完了した後のオブジェクトの状態を設定します。ただし、それ(2番目の引数を渡す)は、コードをどのように微調整するかによって異なります。そのため、単にそれを行うのではなく、ここでそれが望ましい効果であるかどうかを確認してください。
于 2012-08-26T18:37:41.643 に答える