jquery悬停动画问题

我正在使用jquery在我的导航菜单上创建悬停效果。我jQuery是如下：jquery悬停动画问题

$(".hoverMenu").css({"opacity":"0"}); 

     $("#menu-nav li:nth-child(2) a").hover(function(){ 
      $(".hoverMenu").stop().show().animate({ 
       top: '88', 
       opacity: '1' 
      }, 500); 
     }, function(){ 
      $(".hoverMenu").stop().animate({ 
       top: '-247', 
       opacity: '0' 
      }, 500); 
     });

当你将鼠标悬停在第二个菜单项，一类hoverMenu的格动画下来，并增加其透明度，直到其完全可见。我遇到的问题是在hoverMenu动画关闭之后，我希望能够将鼠标悬停在hoverMenu中的各个链接上。因为我在menuNav上悬停（hovermenu引用了一系列列表项目和锚点），hoverMenu启动备份。我想修改我的jquery，所以当你将鼠标悬停在.hovermenu上时，它不会回放。

如果这没有意义，我会扔在一起jsfiddle，但我觉得这是一个相当普遍的问题。总结一下，因为我在＃menu-nav上悬停，hoverMenu开始动画;但我希望hoverMenu保持放置，直到我将鼠标停留在hoverMenu和＃menu-nav

来源

2011-08-02 JCHASE11

有一个非常类似的问题，这个浮动，我发布了一个答案，我相信，但我现在似乎无法找到它。我相信你需要做的就是在你将鼠标悬停在主“li”上时解除绑定，以便你可以自由移动下拉菜单。 –

你的问题似乎与此类似：http://stackoverflow.com/questions/6877178/jquery-menu-works-well-on-hover-but-sub-menu-disappears-on-click，因为他们的菜单显示但只是在点击消失。 –

使hoverMenu成为＃menu-nav的子项，并且当您将鼠标悬停在它上面时，它仍然被视为悬停在#menu上-dav，因为它是一个孩子。

来源

2011-08-02 21:17:35 Ariel

＃menu-nav是由wordpress动态生成的，所以我无法将其添加为小孩，我可以吗？ – JCHASE11

@ JCASE11为什么你不能？只要它在HTML中的正确位置生成。如果没有其他的你可以使用jQuery来移动它。 – Ariel

够公平的，谢谢！我得到了它的工作 – JCHASE11

这是一个相当普遍的问题，我喜欢的方法是简单地将子菜单添加为主项目的子项。这样，子菜单就是其上的hover项目的一部分，所以您进入子菜单的鼠标不会触发离开事件。这通常是有效的，因为无论如何子菜单通常是绝对定位的，所以将它作为另一个项目的子项添加是微不足道的。

来源

2011-08-02 21:19:51

jquery悬停动画问题

回答

相关问题