重复点击后jQuery 1.6.2 slideUp()和slideDown()高度问题

Question

我有一个简单的手风琴菜单,我今天使用jQuery slideDown()和slideUp()方法放在一起.示例代码:

<h1>the header</h1>
<div class='thechild'>
the content
</div>

$(function(){

    $('h1').click(function(){
        var next = $(this).next();
        if (next.is(':visible'))
        {
            next.stop().slideUp();
        }
        else
        {
            next.stop().slideDown();
        }             
        return false;
    });

});

这很有效,但是如果你<h1>在动画完成之前再次单击其中一个,那么你可以打破slideUp()或者slideDown()事件.似乎会发生的是,第二次单击时,它将slideUp()高度调零,但如果向下滑动,它将仅向下滑动到其最后一个最大高度 - 即高度.thechild是您最后一次中断动画的高度点击.

我需要的是,根据需要单击一次slideUp或slideDown .thechild,然后再单击一次以停止动画(如果正在运行)并向上滑动.thechild.随后的第三次单击应该向下滑动.thechild到它的全高,而不是在点击#2时中断时的高度.希望一切都有道理:)

我确定我曾经遇到过这个问题并以某种方式解决了它,但是不记得(或谷歌)我提出的解决方案.这仅仅是这些幻灯片方法的限制,并且是一种解决方法,可以animate()通过一些更高的工作来进行我自己的调用吗？

我试过玩你可以传入的各种布尔.stop(),但无济于事.必须有一些我想念的简单,有人能开导我吗？

jsfiddle:http://jsfiddle.net/cY6kX/

重新创建,双击<h1>多次并观察发生的情况,然后再单击几次以查看它将如何破坏,直到您重新加载页面.

任何指针都非常感激

Answer 1

添加true, true到停止点以完整地完成动画:

$(function(){

    $('h1').click(function(){
        var next = $(this).next();
        if (next.is(':visible'))
        {
            next.stop(true, true).slideUp();
        }
        else
        {
            next.stop(true, true).slideDown();
        }             
        return false;
    });

});

小提琴:http://jsfiddle.net/maniator/cY6kX/2/