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

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"

所有css类都有多个图像“blah”

The images are of random sizes, BUT they all have max-height: 100px

图像是随机大小的,但它们都有最大高度:100px

When a user hovers over an image, I want it to animate the max-height (thereby smoothly un-restricting the height)

当用户将鼠标悬停在图像上时,我希望它为最大高度设置动画(从而平滑地限制高度)

7 个解决方案

#1

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-height which 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.

在我的例子中,我有一个博客文章列表,首先呈现给页面,其最大高度仅显示前4行文本,其余为溢出:隐藏。我有一个展开/折叠按钮,可以将文章从其折叠形式切换为展开(完全显示)并再次返回。

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-height and overflow:hidden on, just like I used div.story above.

为了对图像做同样的事情,我只需将它们包装在一个外部div中,这就是你将设置max-height和overflow:hidden,就像我上面使用div.story一样。

#2

I ran into the same thing.

我碰到了同样的事情。

The answer is to use "maxHeight" rather than "max-height" ...

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

#3

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);
});

#4

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

我对这里的要求感到困惑。如果你想要动画一些东西可能需要等于最大高度。我会做一个声明,检查元素的高度是否等于其最大高度,如果是这样,删除最大高度,然后设置高度动画。应该是同样的效果

#5

Pure CSS solution

纯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

Enjoy!

#6

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).

好的,所以没有办法做我想要的......所以我必须让我自己的函数具有通用的“动画”功能(从d到y,在d毫秒内)。

I wrote a blog post describing how I did it here: Generic "Animate" function with jQuery

我写了一篇博客文章,描述了我在这里的做法:使用jQuery的Generic“Animate”函数

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.

我还包括了它可以做什么的演示。演示链接位于文章的底部,或者对于不耐烦的人,您可以单击此处。

#7

Why not just animate the addition of a class?

为什么不只是增加一个类的动画?

CSS:

.expanded {
   max-height: 350px;
}

jQuery:

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

You may have to add !important to the CSS, but on testing it worked without it.

您可能必须在CSS中添加!important,但在测试时它没有它。

#1