在jQuery中，如何为“max-height”CSS属性设置动画效果？

Question

我可以很容易地动画“不透明度”属性

$("#blah").animate({ opactiy: 0.5}, 1000); 

我如何可以动画最大高度CSS属性...例如：

$("#blah").animate({ "max-height": 350}, 1000); 

（提示，该代码不工作）

编辑：要回答以下问题：

1. 有多个图像的所有的CSS类“嗒嗒”
2. 的图像是随机的尺寸，但它们都具有最大高度：100像素
3. 当用户将鼠标悬停的形象，我想它的动画最大 - 高度（从而顺利地不限制高度）

Answer 1

好的，所以没有办法做我想做的事情......所以我必须让我自己的函数具有通用的“动画”功能（从d到毫秒的x） 。

我写了一篇博客文章中描述我是如何做到在这里：Generic "Animate" function with jQuery

我包括了它能做什么以及演示。演示链接位于文章的底部，或者对于不耐烦的用户，您可以点击here。

Answer 2

我认为你应该先动画高度属性，当动画完成时，将set height设置为auto并将max-height重置为你所需要的值：

$("#blah").animate({ "height": 350}, 1000, function(){ 
    $(this).css('height','auto').css('max-height',350); 
}); 

Answer 3

我很困惑由这里的要求。如果你想动画的东西大概需要等于最大高度已经。我会做一个声明来检查一个元素的高度等于它的最大高度，如果是这样的话，删除最大高度，然后动画高度。应该是相同的效果

Answer 4

这个问题已经有点老了，但这里是我如何使用基本的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 

}); 

做图像一样，我只想将它们包装在外层这是你将设置max-height和overflow:hidden，就像我上面的div.story一样。

Answer 5

纯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} 

DEMO

享受！

Answer 6

我遇到了同样的事情。

的答案是使用"maxHeight"而非"max-height" ...