jQuery：在div元素中混合应该平滑地扩展parent-div的自动高度

Question

仍然是jQuery的新手，所以：快速提问。我有一个div，它包含响应式投资组合weblayout的各种对象。首先只显示3个对象，其余的是display: none;通过CSS。使用按钮，可以通过JavaScript混合这些不可见的对象。代码类似于：

$('#maindiv').click(function() {
    $(this).find('.objects').fadeIn();
});

可以这样工作，但由于#maindiv在CSS文件中设置了height: auto，因此#maindiv的高度只要新对象开始淡出就会跳转。由于我需要的auto值，通过CSS的过渡动画不起作用。所以问题是：有没有办法使用JavaScript来使#maindiv的高度以某种方式从旧的自动值动画到新的自动值？或类似的东西？

Answer 1

有一种方法，虽然它不是100％可预测/可控的动画rusn有多快。您可以设置max-height的动画，使您仍然可以使用height：auto。

div {
max-height:1.2em;

-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;

}

like this