Javascript 子对象可见性更改时的Div高度过渡

子div以编程方式显示或隐藏，从而更改父元素的高度。如何设置

#parent

高度变化的动画？我尝试了css转换属性，但没有成功。

而不是

。hide（）

和

。show（）

使用

slideUp（）

和

slideDown（）

动画，这将提供一个很好的效果，而不是那种不稳定的效果

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

---

编辑：添加>>如果回答了此问题，请随意接受最合适的答案。

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

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