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

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

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

2 个答案: