Во время анимации jQuery UL-элемент верхнего уровня исчезает

Question

У меня есть вложенный набор неупорядоченных списков, которые я использую для структуры раскрывающегося меню:

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

Я использую jQuery для анимации выпадающего списка / отображения div и потомка 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);
      })

Однако, когда эта анимация запускается, UL, находящийся непосредственно под div, исчезает до тех пор, пока анимация не закончится.

Это можно просмотреть на http://acldev.com/rsac/index.php (я замедлил анимацию ПУТЬ, чтобы подчеркнуть точку.

Что вызывает исчезновение UL? Когда я прекращаю анимацию DIV, UL не исчезает.

Answer 1

Ваше меню исчезает из-за этого селектора jQuery(this).find('div').animate... в третьей строке.

Попробуйте использовать что-то вроде jQuery(this).find('.maincats ul').animate... для явного отображения и исчезновения вложенных списков.

Надеюсь, это поможет.