jQuery的效果基本show（）和了slideDown（）問題

我很新的jQuery和具有B/M問題了slideDown和效果基本show事件。jQuery的效果基本show（）和了slideDown（）問題

我有5個按鈕（列爲列表項e.g體育，品牌等），其本身被包裹在DIV ID爲shoppingNav水平導航欄。

我有一個slidedown菜單，它有CSS display:none（div與編號submenu_bg）。

我想submenu_bg當我將鼠標放置到#shoppingNav和了slideDown保持可見，直到我從#shoppingNav鼠標移開。我想在懸停但submenu_bg fadeIn不同的圖標各個按鈕，直到我從整個鼠標移開導航欄（#shoppingNav）上應保持可見。

目前發生的事情是什麼submenu_bg繼續滑動向下和向上懸停時，從一個按鈕到另一個。

您可以檢查我想要得到nike.com的影響。我無法弄清楚如何做到這一點。任何幫助，將不勝感激。

jQuery代碼：

$(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>

來源

2012-09-11 Jagdish Prabhu

鼠標放在一個新的列表元素時使用超時，然後明確表示超時，從而不會滑動再次子菜單：

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

FIDDLE

來源

2012-09-11 08:12:02 adeneo

+1我覺得這是更可能的答案。 – Undefined

謝謝你的努力。上面的代碼已經爲我工作。但是，只是想知道問題是由於事件冒泡給兒童（李項目），因爲每個按鈕分別發射鼠標懸停事件。我可以在我原來的代碼中使用event.stopPropagation（）。此外，如果有人能在這方面爲我推薦一篇好文章或書籍，我將不勝感激。目前我正在閱讀Javascript和jQuery - 缺少的手冊。謝謝和bregds .... –

不，它不是真的與冒泡有關。問題在於，當鼠標進入任何列表元素時，slideDown開始，鼠標離開列表元素時出現slideUp，並且當您從一個列表元素移動到另一個列表元素時，將會觸發slideUp/Down。當鼠標離開時使用一個很小的超時時間，給我們一個小窗口，當鼠標離開時，如果鼠標進入另一個列表元素，可以取消slideUp，並檢查元素是否可見，防止再次觸發slideDown。 – adeneo

這似乎與你包裝事件處理程序的方式有關。

我這個玩周圍，並設法得到它的工作here。

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

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

來源

2012-09-11 08:12:37 Undefined

jQuery的效果基本show（）和了slideDown（）問題

回答

相關問題