Question

我们基本上想要为当前设置的元素设置动画

my.css文件：

#stuff {
    max-height: 70px
}

到max-height: auto。

$('#stuff').animate({'max-height': 'auto'});

不起作用 - 这当然'auto'不是一个数字。

要点是：如果我设置max-height: auto div有一些计算高度（如Chrome开发者工具中所见）大约200px - 但由于内容可以编辑，我不能硬编码。< / p>

如果我使用固定值，如

$('#stuff').animate({'max-height': 200});

这有效 - 但是如果div的内容变得更好（可以在CMS中编辑）该怎么办。

有没有办法确定div与max-height: auto（大约200px）的高度，然后使用此值来正确设置它的动画？

Answer 1

我目前的解决方法：

#stuff元素包含两个嵌套的div：

<div id="stuff">
    <div id="a">Lorem Ipsum</div>
    <div id="b">Lorem Ipsum</div>
</div>

我现在正在使用$('#a').outerWidth() + $('#b').outerWidth()来计算我需要的高度。（罗斯'答案中的cHeight）

更好的方法：

选项可能是

复制完整的#stuff div
使其显示无
删除max-height属性（max-height：auto）
然后使用`cHeight = $（'＃stuff-duplicate'）。height（）'

Answer 2

我认为你需要做的就是准备好DOM，计算div的实际高度：

$(function () {
    var $stuff = $('#stuff');
    var height = $stuff.clone().css({
        position: 'absolute', // hide this cloned element
        left: '-10000px',
        maxHeight: 'none' // clear the max-height set by CSS
    }).appendTo('body').height();

    $stuff.animate({
        maxHeight: height
    });
});

在jsFiddle

上查看

找出元素的高度必须正确地为max-height设置动画

2 个答案:

我目前的解决方法：

更好的方法：