在jQuery中,如何设置“max height”CSS属性的动画?

max-height 它只显示前4行文本,其余的是 overflow: hidden . 我有一个展开/折叠按钮,可以将文章从折叠的形式切换到展开(完全显示),然后再切换回来。

我也试着把它设置为一个非常大的数字,比如“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

});

最大高度 和 overflow:hidden

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

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

纯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

好吧,所以没有办法做我想做的事。。。所以我不得不自己做一个函数来实现通用的“动画”函数(从x到y,以d毫秒为单位)。

我写了一篇博客描述了我是如何做到这一点的: Generic "Animate" function with jQuery

我包括了一个演示它可以做什么以及。演示链接在文章的底部,对于不耐烦的人,您可以单击 here .

为什么不直接为类的添加设置动画呢?

CSS格式:

.expanded {
   max-height: 350px;
}

jQuery查询:

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

!important 但是在测试中,没有它也能工作。

我只是看了一下这个,发现它确实有用。我就是这么做的:

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

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