Au cours de jQuery Animation, niveau supérieur élément UL disparait

Question

I ont un ensemble imbriqué de listes à puces que j'utilise une structure de menu déroulant:

UL> LI> DIV> UL> LI * n> A

J'utilise jQuery pour animer le menu déroulant/affichage de la div et de l'enfant ul:

jQuery('ul.top-ul li.top-li').hover(function() { 
      jQuery(this).animate({height:"150px"},200); 
      jQuery(this).find('div').animate({height:"150px"},4000, function() { 
       jQuery('ul.top-ul li.top-li div p').fadeIn('fast'); 
      }); 
     }, function() { 
      jQuery('ul.top-ul li.top-li div p').fadeOut('fast'); 
      jQuery(this).animate({height:"22px"},200); 
      jQuery(this).find('div').animate({height:"0px"},200); 
     }) 

Lorsque cette animation fonctionne, cependant, l'UL directement sous la div disparaît jusqu'à ce que l'animation a suivi son cours.

C'est visible à http://acldev.com/rsac/index.php (je l'ai ralenti l'animation en bas juste pour souligner le point.

Qu'est-ce qui cause UL disparaître? Quand j'arrête animant la DIV, l'UL ne disparaît pas.

Answer 1

votre menu est dissapearing à cause de ce sélecteur jQuery(this).find('div').animate... dans votre troisième ligne.

Essayez d'utiliser quelque chose comme jQuery(this).find('.maincats ul').animate... pour faire explicitement apparaître et disparaître les listes imbriquées.

J'espère que ça aide.