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

Question

我今天使用 jQuery slideDown() 组合了一个简单的 Accordion 菜单。和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是您最后一次通过单击中断动画的时间。

我需要的是一键向上滑动或向下滑动.thechild根据需要，第二次单击以停止动画(如果正在运行)并滑动 .thechild向上。随后的第三次单击应向下滑动 .thechild到其完整高度，而不是单击#2 时中断时的高度。希望一切都有意义:)

我确信我以前曾经遇到过这个问题并以某种方式解决了它，但不记得(或谷歌)我想出的解决方案。这只是这些幻灯片方法的限制吗？这是我自己的解决方法animate()打电话来进行更多的高度锻炼吗？

我尝试过使用您可以传递给 .stop() 的各种 bool 值。 ，但无济于事。我一定缺少一些简单的东西，有人可以启发我吗？

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;
    });

});

fiddle :http://jsfiddle.net/maniator/cY6kX/2/