儿童能见度变化时的Div高度转换

Question

<div id='parent'>
    <div class='children'></div>
    <div class='children'></div>
    <div class='children'></div>
    <div class='children'></div>
</div>

以编程方式显示或隐藏子元素会更改父元素的高度。如何设置#parent高度变化的动画？我尝试过使用css过渡属性，但它没有用。

Answer 1

而不是.hide()和.show()使用slideUp()和slideDown()动画，这会产生很好的效果，而不是那种不稳定的效果。

修改：已添加＆gt;＆gt; DEMO＆lt;＆lt;

Answer 2

<div id='parent'>
    <div class='children'></div>
    <div class='children'></div>
    <div class='children'></div>
    <div class='children'></div>
</div>

// suppose hiding last .children
$('.children:last').hide(0, function() {
  var ph = $(this).parent().height(),
      ch = $(this).height();
  $(this).parent().animate({
     height: ph-ch
  });
})

或者只是像@Vege提到的那样：

$('.children:last').hide();