私はjqueryを初めて使用し、slidedownおよびslideupイベントでb / mの問題を抱えています。
5 つのボタン (スポーツ、ブランドなどのリスト アイテムとして指定) を備えた水平ナビゲーション バーがあり、それら自体が id shoppingNav の div にラップされています。
display:none
CSS ( 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>