Question

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

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

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

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

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

编辑：回答以下问题：

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

Answer 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一样。 / p>

Answer 2

我遇到了同样的事情。

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

Answer 3

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

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

Answer 4

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

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

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

我写了一篇博文，描述了我在这里的做法：Generic "Animate" function with jQuery

我还提供了它可以做什么的演示。演示链接位于文章的底部，或者对于不耐烦的人，您只需点击here。

Answer 7

为什么不仅仅为增加班级设置动画？

CSS：

:x1

jQuery：

.expanded {
   max-height: 350px;
}

您可能必须将$("#blah").addClass("expanded", 1000);添加到CSS，但是在测试时没有CSS即可。

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

7 个答案: