在 jQuery 中，如何为“max-height”CSS 属性设置动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3569379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In jQuery, how do I animate the "max-height" CSS property?
提问by Timothy Khouri
I can easily animate the "opacity" property
我可以轻松地为“不透明度”属性设置动画
$("#blah").animate({ opacity: 0.5}, 1000);
How can I animate the max-height css property... example:
如何为 max-height css 属性设置动画...示例：
$("#blah").animate({ "max-height": 350}, 1000);
(hint, that code doesn't work)
（提示，该代码不起作用）
EDIT: To answer the questions below:
编辑：回答以下问题：
- There are multiple images all of css class "blah"
- The images are of random sizes, BUT they all have max-height: 100px
- When a user hovers over an image, I want it to animate the max-height (thereby smoothly un-restricting the height)
- 有多个图像，所有的 css 类“等等”
- 图片的大小是随机的，但它们都有 max-height: 100px
- 当用户将鼠标悬停在图像上时，我希望它为最大高度设置动画（从而平滑地取消限制高度）
采纳答案by Timothy Khouri
OK, so there is no way to do what I wanted... So I've had to make my own function to have generic "animation" function (from x to y in d milliseconds).
好的，所以没有办法做我想做的事......所以我不得不让我自己的函数具有通用的“动画”函数（从 x 到 y，以 d 毫秒为单位）。
I wrote a blog post describing how I did it here: Generic "Animate" function with jQuery
我写了一篇博客文章描述了我是如何做到的：Generic "Animate" function with jQuery
I included a demo of what it can do as well. The demo link is at the bottom of the article, or for the impatient, you can just click here.
我还包含了它可以做什么的演示。演示链接在文章底部，不耐烦的可以直接点这里。
回答by mkoistinen
This question is getting a bit old, but here's how I solved it using basic jQuery, in case someone else needs a simple solution.
这个问题有点老了，但这是我使用基本 jQuery 解决它的方法，以防其他人需要一个简单的解决方案。
In my case, I have a list of blog posts which are first rendered to the page with a max-heightwhich only shows the first 4 lines of text, the rest being overflow: hidden. I have a expand/collapse button which toggles the article from its collapsed form to expanded (fully displayed) and back again.
就我而言，我有一个博客文章列表，这些文章首先呈现到页面上，其中 amax-height仅显示前 4 行文本，其余为overflow: hidden. 我有一个展开/折叠按钮，可以将文章从折叠形式切换到展开（完全显示）然后再返回。
At first I tried animating the max-height property directly and, as you've discovered above, this won't work. I also tried this with css transitions with the same disappointing result.
起初，我尝试直接为 max-height 属性设置动画，正如您在上面发现的那样，这是行不通的。我也用 css 转换尝试过这个，结果同样令人失望。
I also tried just setting it to a very large number like '1000em', but this made the animations look dumb as it was literally interpolating to such a large value (as you'd expect).
我还尝试将其设置为一个非常大的数字，例如“1000em”，但这使动画看起来很愚蠢，因为它实际上是插入到如此大的值（如您所料）。
My solution uses scrollHeight, which is used to determine the natural height of each story once the page is loaded as follows:
我的解决方案使用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
});
To do the same with images, I would just wrap them in an outer div which is what you'll set the max-heightand overflow:hiddenon, just like I used div.story above.
要做到与图像一样，我只想将它们包装在外层div这是什么，你会设置max-height和overflow:hidden上，就像我上面使用div.story。
回答by rfornal
I ran into the same thing.
我遇到了同样的事情。
The answer is to use "maxHeight"rather than "max-height"...
答案是使用"maxHeight"而不是"max-height"...
回答by IgalSt
I think that you should animate the height property first and when the animation has finished replace set height to auto and reset max-height to what you need it to be:
我认为您应该首先为 height 属性设置动画，当动画完成后将 set height 替换为 auto 并将 max-height 重置为您需要的值：
$("#blah").animate({ "height": 350}, 1000, function(){
$(this).css('height','auto').css('max-height',350);
});
回答by Stuart Burrows
I'm confused by the requirement here. If you are wanting to animate something presumably it needs to be equal to the max height already. I'd do an of statement to check of an element's height equals its max height, if so remove the max-height and then animate the height. Should be the same effect
我对这里的要求感到困惑。如果您想为某些东西设置动画，则它可能已经等于最大高度。我会做一个 of 语句来检查元素的高度是否等于其最大高度，如果是这样，请删除最大高度，然后为高度设置动画。应该是一样的效果
回答by Armand
回答by SharpC
Why not just animate the addition of a class?
为什么不直接动画添加一个类？
CSS:
CSS：
.expanded {
max-height: 350px;
}
jQuery:
jQuery：
$("#blah").addClass("expanded", 1000);
You may have to add !importantto the CSS, but on testing it worked without it.
您可能需要添加!important到 CSS 中，但在测试时没有它也能工作。
回答by GuyOxford
I just took a look at this and found that it does work. This is what I did:
我只是看了一下这个，发现它确实有效。这就是我所做的：
$("#blah").animate({"max-height": 350}, {queue: false, duration: 1000});
Works for max-height without any problem.
适用于 max-height 没有任何问题。
