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（）问题

回答

相关问题