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

Question

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

这是我所拥有的一个例子。 动画的外观不太好，因为父级的高度是在其子级被隐藏后立即更改的，而不是像jQuery .slideUp()动画那样在进程中.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);
    }
});

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