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 here: 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/

Answer 2

将true添加到停止方法。例如:stop(true,true)