jQuery .stop() ломает последующие анимации

Question

Я пытаюсь сделать аккордеонное меню с помощью jQuery, но оно отказывается сотрудничать: http://jsfiddle.net/vrcpK/1/

Вот мой JavaScript:

$('#submenu div.submenu').hover(function() {
    $('.submenu-head', this).addClass('visible');

    $(this).siblings().each(function() {
        $('div.submenu-body', this).stop(true).slideUp('slow');
        $('p.submenu-head', this).removeClass('visible');
    });

    $('div.submenu-body', this).stop(true).slideDown(500);
}, function() {
    $('.submenu-head', this).removeClass('visible');

    $('div.submenu-body', this).stop(true).slideUp('slow');
});​

При наведении курсора на элемент дважды меню исчезает и медленно уменьшается. После этого он вялым образом раскрывает треть контента.

Я подозреваю, что это проблема с моим .stop(true) звонки, но я не могу придумать какой-либо другой способ удержать меню от желатина после наведения на него мыши.

Любая помощь будет принята с благодарностью!

Answer 1

Похоже, высота установлена ​​на то, что есть, когда вы зависаете... попробуйте сбросить высоту до автоматического, когда скольжение вверх завершено...

$('div.submenu-body', this).stop().slideUp('slow', function() {
  $(this).height('auto');
});