javascript - jQuery .stop() 中断后续动画

Question

我试图用 jQuery 制作一个类似 Accordion 的菜单，但它拒绝合作: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');
});