1

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

我的.css 文件：

#stuff {
    max-height: 70px
}

到max-height: auto.

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

不工作 - 这当然是有道理的，因为“自动”不是一个数字。

要点是：如果我将max-height: autodiv 设置为大约 200 像素的计算高度（如在 Chrome 开发人员工具中所见） - 但由于可以编辑内容，我不能对此进行硬编码。

如果我使用固定值，例如

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

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

有没有办法确定 div 的高度max-height: auto（大约 200 像素），然后使用这个值来正确地为它设置动画？

4

2 回答 2

1

我认为您需要做的是准备好 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上查看

于 2013-07-17T15:34:26.533 回答
1

我目前的解决方法：

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

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

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

更好的方法：

一个选择可能是

  1. 复制完整的#stuff div
  2. 让它不显示
  3. 删除最大高度属性（最大高度：自动）
  4. 然后使用 `cHeight = $('#stuff-duplicate').height()'
于 2013-07-17T15:23:17.113 回答