Problème d'animation JQuery Hover

J'utilise jquery pour créer un effet de survol dans mon menu de navigation. Mon jquery est la suivante:Problème d'animation JQuery Hover

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

Lorsque vous passez la souris sur le deuxième élément de menu, la div avec une classe de hoverMenu anime vers le bas, et augmente son opacité jusqu'à ce que son entièrement visible. Le problème que j'ai est après que le hoverMenu s'anime, je veux être capable de survoler les liens individuels dans le hoverMenu. Parce que je suis en train de planer le menuNav (le hovermenu est gros avec une série d'éléments de liste et d'ancres), le hoverMenu s'anime. Je veux modifier ma jquery alors quand vous passez la souris sur .hovermenu, elle ne s'anime pas.

Si cela n'a pas de sens, je jetterai ensemble un jsfiddle, mais j'ai l'impression que c'est un problème assez commun. Pour résumer, parce que je suis en train de planer sur le # menu-nav, le hoverMenu s'anime; Cependant, je voudrais que le hoverMenu reste sur place jusqu'à ce que je passe la souris sur hoverMenu et # menu-nav

Source

2011-08-02 JCHASE11

Il y a une question très similaire à ce flottement, j'ai posté une réponse à ce que je crois, mais je n'arrive pas à le trouver maintenant. Je crois que l'essentiel de ce que vous devez faire est de délier lorsque vous passez la souris sur le 'li' principal afin que vous puissiez vous déplacer librement dans la liste déroulante. –

Votre problème semble plutôt similaire à ceci: http://stackoverflow.com/questions/6877178/jquery-menu-works-well-on-hover-but-sub-menu-disappears-on-click car ils avaient leur menu montrant mais disparaissant juste sur le clic. –

Faites de hoverMenu un enfant de # menu-nav, et quand vous le survolez, ça compte toujours comme # plan sur -dav puisque c'est un enfant.

Source

2011-08-02 21:17:35 Ariel

le # menu-nav est généré dynamiquement par wordpress, donc je ne peux pas l'ajouter en tant qu'enfant, n'est-ce pas? – JCHASE11

@ JCASE11 Pourquoi pas vous? Juste l'avoir généré au bon endroit dans le HTML. Si rien d'autre vous pouvez utiliser jQuery pour le déplacer. – Ariel

assez juste, merci! Je l'ai eu le travail – JCHASE11

C'est un problème assez commun et l'approche que je préfère est d'ajouter simplement le sous-menu en tant qu'enfant de l'élément principal. De cette façon, le sous-menu fait partie de l'élément avec le hover, donc votre souris entrant dans le sous-menu ne déclenchera pas l'événement de congé. Cela fonctionne généralement puisque le sous-menu est généralement positionné de toute façon, donc il est trivial de l'ajouter en tant qu'enfant de l'autre objet.

Source

2011-08-02 21:19:51

Problème d'animation JQuery Hover

Répondre

Questions connexes