jQueryUI：在子动画上为父元素高度设置动画

Question

当我使用 jQuery UI .hide('slide', {direction:'up'}) 动画隐藏子元素时，我也想为其父元素的高度设置动画。

Here 是我所拥有的一个例子。动画看起来不太好，因为父级的高度在其子级隐藏后立即更改，而不是在进程中更改，如 jQuery .slideUp() 动画。

Answer 1

我很快将您的 CSS 修改如下，看起来还不错。有点胡闹，它应该看起来和你想要的完全一样。

#container{
    width:100px;
    padding:10px;
    text-align:center;
    height:auto;
}

#child{
    background-color:blue;
    border:10px solid #red;
    border-top:0px;
}

#content{
    background-color:red;
}

Answer 2

更新： 一些调整 :) 测试：http://jsfiddle.net/inti/BG4Hk/16/

试试这样的：

var original_height = 0;

$('#child').click(function() {
    if (!original_height) {
        original_height = $(this).height();
    }
    $(this).stop().animate({'height': 0}, 1000, function() { $(this).hide(); });
});

$('#content').click(function() {
    if (original_height) {
        $('#child').stop().show().animate({'height': original_height}, 1000);
    }
});

需要更多的工作来处理松散的问题，但这是一个开始。