javascript - 儿童可见性变化时的Div高度过渡

Question

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

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

Answer 1

而不是使用.hide()和动画，它会产生一个很好的效果而不是那种摇晃的效果。.show()slideUp()slideDown()

编辑：添加>> DEMO <<

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