During jQuery Animation, top level UL element disappears

Question

I have a nested set of unordered lists that I'm using for a dropdown menu structure:

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

I'm using jQuery to animate the dropdown/display of the div and child 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);
      })

When this animation runs, however, the UL directly under the div disappears until the animation has run its course.

This is viewable at http://acldev.com/rsac/index.php (I've slowed the animation WAY down just to emphasize the point.

What's causing UL to disappear? When I stop animating the DIV, the UL doesn't disappear.

Answer 1

Hi Jim Wharton,

Your menu is dissapearing because of this selector jQuery(this).find('div').animate... in your third line.

Try using something like jQuery(this).find('.maincats ul').animate... to explicitly make appear and disappear the nested lists.

Hope it helps.