jQuery - 动画/滑动到高度：100%答案

【问题标题】：jQuery - animate / slide to height: 100%jQuery - 动画/滑动到高度：100%
【发布时间】：2010-11-18 19:48:52
【问题描述】：

我这里有一个简单的代码：

$('.aktualita_sipky').toggle(function() {
    $(this).parent().find('.aktualita_content').animate({ 
        height: "100%",
      }, 1500 );
}, function() {
    $(this).parent().find('.aktualita_content').animate({ 
        height: "120px",
      }, 1500 );
});

现在，当我单击它作为第一个“切换”时，它会立即显示（没有动画），当我单击第二个“切换”时，它会很好地向上滑动。

有没有办法用那个漂亮的动画把它滑到 100%？

【问题讨论】：

标签： jquery slider jquery-animate

【解决方案1】：

也许你可以这样做：

$height = $(window).height();   // returns height of browser viewport
//Or
$height = $(document).height(); // returns height of HTML document
//Or
$height = $(whatever).height();
$('.aktualita_sipky').toggle(function() {
    $(this).parent().find('.aktualita_content').animate({ 
        height: $height + 'px',
      }, 1500 );
}, function() {
    $(this).parent().find('.aktualita_content').animate({ 
        height: $height + 'px',
      }, 1500 );
});

http://docs.jquery.com/CSS/height

【讨论】：

如果您想考虑填充、边框和边距，请使用 outerHeight(true) 而不仅仅是 height()。 (api.jquery.com/outerHeight)

【解决方案2】：

我的解决方法是将 div 中的子元素的高度相加，添加一点以考虑边距：

function() {
  $('.accordionblock.open').removeClass('open');
  var childrenheight = 0;  $(this).children().each(function() {childrenheight += ($(this).height()*1.2)});
  $(this).animate({height:childrenheight},300).addClass('open');
  }
}

【讨论】：

如果您将其更改为使用 outerHeight(true)，我会赞成这个答案。为边距添加任意高度有点草率... { childrenheight += $(this).outerHeight(true); } (api.jquery.com/outerHeight)

【解决方案3】：

我在自己寻找解决方案时发现了这篇文章，Karim79 提出了使用变量和height() 函数的好建议。

对我来说，我不会从 100% 的高度开始，因为我在样式表中定义了预设高度。因此，我在扩展函数中所做的是创建一个变量，该变量具有一个查询，可以退回到我想要扩展的特定元素，并将 css 高度更改为 100% 并将高度返回给一个变量。然后我将高度的 css 设置回来（我想我可以习惯 vars 告诉原始预设高度，以防我将来编辑 css），然后使用带高度的 var 运行动画函数。

function expandAlbum (){
    var fullHeight = jQuery(this).prev('.albumDropdown').css('height' , '100%').height();
    jQuery(this).prev('.albumDropdown').css('height' , '145px');
    jQuery(this).prev('.albumDropdown').animate({'height' : fullHeight}, 1000, function(){jQuery(this).stop();});
    jQuery(this).html('close');
}

我也不是很有经验，所以请原谅草率的编码。

【讨论】：

仅供参考：您可以使用 $(this) 代替 JQuery(this)。 $ = JQuery
另外，这也可以：var fullHeight = $(this).prev('.albumDropdown').show().outerHeight(true);