我可以轻松地为“不透明度”属性设置动画
$("#blah").animate({ opacity: 0.5}, 1000);
如何为 max-height css 属性设置动画...示例：
$("#blah").animate({ "max-height": 350}, 1000);
（提示，该代码不起作用）
编辑：回答以下问题：
【问题讨论】：
标签： jquery css jquery-animate
这个问题有点老了，但这是我使用基本 jQuery 解决它的方法，以防其他人需要一个简单的解决方案。
在我的例子中，我有一个博客文章列表，这些文章首先呈现到带有 max-height 的页面，它只显示前 4 行文本，其余的是 overflow: hidden。我有一个展开/折叠按钮，可以将文章从折叠形式切换到展开（完全显示）然后再返回。
起初我尝试直接为 max-height 属性设置动画，正如您在上面发现的那样，这不起作用。我也尝试过使用 css 转换，结果同样令人失望。
我也尝试将它设置为一个非常大的数字，例如“1000em”，但这使得动画看起来很愚蠢，因为它实际上是插值到如此大的值（如您所料）。
我的解决方案使用scrollHeight，它用于确定页面加载后每个故事的自然高度，如下所示：
$(function(){ // DOM LOADED
// For each story, determine its natural height and store it as data.
// This is encapsulated into a self-executing function to isolate the
// variables from other things in my script.
(function(){
// First I grab the collapsed height that was set in the css for later use
var collapsedHeight = $('article .story').css('maxHeight');
// Now for each story, grab the scrollHeight property and store it as data 'natural'
$('article .story').each(function(){
var $this = $(this);
$this.data('natural', $this[0].scrollHeight);
});
// Now, set-up the handler for the toggle buttons
$('.expand').bind('click', function(){
var $story = $(this).parent().siblings('.story').eq(0),
duration = 250; // animation duration
// I use a class 'expanded' as a flag to know what state it is in,
// and to make style changes, as required.
if ($story.hasClass('expanded')) {
// If it is already expanded, then collapse it using the css figure as
// collected above and remove the expanded class
$story.animate({'maxHeight': collapsedHeight}, duration);
$story.removeClass('expanded');
}
else {
// If it is not expanded now, then animate the max-height to the natural
// height as stored in data, then add the 'expanded' class
$story.animate({'maxHeight': $story.data('natural')}, duration);
$story.addClass('expanded');
}
});
})(); // end anonymous, self-executing function
});
要对图像执行相同操作，我只需将它们包装在一个外部 div 中，这就是您将设置 max-height 和 overflow:hidden 的内容，就像我在上面使用 div.story 一样。
【讨论】：
我遇到了同样的事情。
答案是使用"maxHeight" 而不是"max-height" ...
【讨论】：
maxHeight 和 "max-height" 都可以在较新版本的 jQuery 中使用。 jsfiddle.net/9jswu7L6/1
我认为您应该首先为 height 属性设置动画，然后在动画完成后将 set height 替换为 auto 并将 max-height 重置为您需要的值：
$("#blah").animate({ "height": 350}, 1000, function(){
$(this).css('height','auto').css('max-height',350);
});
【讨论】：
我对这里的要求感到困惑。如果您想为某些东西设置动画，大概它需要等于最大高度。我会做一个 of 语句来检查元素的高度是否等于它的最大高度，如果是这样，请删除最大高度，然后为高度设置动画。应该是一样的效果
【讨论】：
纯 CSS 解决方案
HTML
<div>max-height element</div>
css
div {
max-height:20px;
overflow:hidden;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;}
div:hover {
max-height:300px}
享受吧！
【讨论】：
好的，所以没有办法做我想做的事......所以我不得不让我自己的函数拥有通用的“动画”函数（在 d 毫秒内从 x 到 y）。
我在这里写了一篇博客文章来描述我是如何做到的：Generic "Animate" function with jQuery
我还附上了它可以做什么的演示。演示链接在文章底部，不耐烦的可以点击here。
【讨论】：
为什么不只是动画添加一个类？
CSS：
.expanded {
max-height: 350px;
}
jQuery:
$("#blah").addClass("expanded", 1000);
您可能需要在 CSS 中添加 !important，但在测试时没有它也可以。
【讨论】：
我只是看了看，发现它确实有效。这就是我所做的：
$("#blah").animate({"max-height": 350}, {queue: false, duration: 1000});
适用于最大高度没有任何问题。
【讨论】：