在 jQuery 中，如何为“最大高度”CSS 属性设置动画？

Posted 2023-05-08

【中文标题】在 jQuery 中，如何为“最大高度”CSS 属性设置动画？

【英文标题】：In jQuery, how do I animate the "max-height" CSS property?

【发布时间】：2011-04-03 22:04:01

【问题描述】：

我可以轻松地为“不透明度”属性设置动画

$("#blah").animate( opacity: 0.5, 1000);

如何为 max-height css 属性设置动画...示例：

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

（提示，该代码不起作用）

编辑：回答以下问题：

有多个图片都是 css 类“blah” 图片大小随机，但都具有最大高度：100px 当用户将鼠标悬停在图像上时，我希望它为最大高度设置动画（从而平滑地取消限制高度）

【参考方案1】：

这个问题有点老了，但这是我使用基本 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 一样。

【讨论】：

顺便说一句，scrollHeight 始终可用，因此您无需将其缓存在“数据”字段中。

【参考方案2】：

我遇到了同样的事情。

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

【讨论】：

maxHeight 和 "max-height" 都可以在较新版本的 jQuery 中使用。 jsfiddle.net/9jswu7L6/1

这个问题似乎是在寻求一种使用旧版本 jQuery 为 max-height 设置动画的方法。 jsfiddle.net/9jswu7L6/2

@apaul34208 我把这个问题看了两遍，没有提到 jQuery 的版本。虽然，我同意在旧版本中，必须进行一些额外的调整才能使这项工作正常进行（另外，最初的问题是 2010 年的，但今年更新了）。

【参考方案3】：

我认为您应该首先为 height 属性设置动画，然后在动画完成后将 set height 替换为 auto 并将 max-height 重置为您需要的值：

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

【讨论】：

对 height 属性进行动画处理会拉伸比“max”更短的图像 - 不过值得考虑。

【参考方案4】：

我对这里的要求感到困惑。如果您想为某些东西设置动画，大概它需要等于最大高度。我会做一个 of 语句来检查元素的高度是否等于它的最大高度，如果是这样，请删除最大高度，然后为高度设置动画。应该是一样的效果

【讨论】：

如果我将高度设置为 1000... 那么我将拉伸只有 300 像素高的图像。 --- 但是，如果我为最大高度设置动画，那么高图像会增长，但较短的图像不会超过 300 像素......所以效果不一样。 （好主意）

啊，我明白了，我没想到元素是图像。我认为这是要走的路。可能有一个功能可以抓取图像大小供您参考。对不起，我帮不上忙！注意：在您编辑的问题中，您说您不会限制高度，这有点令人困惑。我了解您想增加限制高度。如果格式为真，您可以将高度设置为 100%。我提到这一点是为了帮助避免其他用户的混淆

【参考方案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

享受吧！

【参考方案6】：

好的，所以没有办法做我想做的事......所以我不得不让我自己的函数拥有通用的“动画”函数（在 d 毫秒内从 x 到 y）。

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

我还附上了它可以做什么的演示。演示链接在文章底部，不耐烦的可以点击here。

【讨论】：

此后有人提出并解决了同样的问题***.com/questions/4901643/…

【参考方案7】：

为什么不只是动画添加一个类？

CSS：

.expanded 
   max-height: 350px;

jQuery:

$("#blah").addClass("expanded", 1000);

您可能需要在 CSS 中添加 !important，但在测试时没有它也可以。

【参考方案8】：

我只是看了看，发现它确实有效。这就是我所做的：

$("#blah").animate("max-height": 350, queue: false, duration: 1000);

适用于最大高度没有任何问题。