0

私はjqueryを初めて使用し、slidedownおよびslideupイベントでb / mの問題を抱えています。

5 つのボタン (スポーツ、ブランドなどのリスト アイテムとして指定) を備えた水平ナビゲーション バーがあり、それら自体が id shoppingNav の div にラップされています。

display:noneCSS （ id の div ）を持つスライドダウンメニューがありますsubmenu_bg。

submenu_bgマウスオーバーしたときにスライドダウンし、マウスアウトするまで#shoppingNav表示したままにし#shoppingNavます。ホバー時に個々のボタンを別のアイコンにしたいのですfadeInが、submenu_bg は、ナビゲーション バー ( ) で全体からマウスアウトするまで表示されたままにする必要があります#shoppingNav。

現在起こっていることはsubmenu_bg、あるボタンから別のボタンにホバーするときに上下にスライドし続けることです。

欲しい効果はnike.comで確認できます。これを行う方法がわかりません。これに関するヘルプは大歓迎です。

Jクエリコード:

$(function(){
$('#shoppingNav').on('mouseover',function(){
    $('#submenu_bg').slideDown(200);
    });

$('#shoppingNav').on('mouseout',function(){
    $('#submenu_bg').stop().slideUp(200);
    });
});

<div id="shoppingNav">
        <ul>
        <li id="sports"><a href="#"></a></li>   
            <li id="brand"><a href="#"></a></li>                        
            <li id="clothing"><a href="#"></a> </li>                        
            <li id="footwear"><a href="#"></a></li>                         
            <li id="hotdeals"><a href="#"></a></li>
        </ul>
        <div id="submenu_bg"><img src="_images/submenu_bg1.png" alt="some background"/></div> 

</div>
4

2 に答える 2

1

タイムアウトを使用し、新しいリスト要素の上にマウスを置いたときにそのタイムアウトをクリアして、サブメニューが再びスライドしないようにします。

$(function(){
    var timer;
    $('#shoppingNav').on({
        mouseenter: function(){
            clearTimeout(timer);
            if (!$('#submenu_bg').is(':visible'))
                $('#submenu_bg').slideDown(200);
        },
        mouseleave: function(){
            timer = setTimeout(function() {
                $('#submenu_bg').slideUp(200);
            }, 500);
        }
    });
});​

フィドル

于 2012-09-11T08:12:02.923 に答える
0

イベントハンドラーをラップする方法と関係があるようです。

私はこれをいじって、なんとかここで動作させることができました。

$('#shoppingNav').on('mouseover',function(){
  $('#submenu_bg').slideDown(200);
});

$('#shoppingNav').on('mouseout',function(){
  $('#submenu_bg').stop().slideUp(200);
});

</p>

于 2012-09-11T08:12:37.547 に答える