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