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

Posted 2023-05-08

【中文标题】jQuery - 动画/滑动到高度：100%

【英文标题】：jQuery - animate / slide to height: 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%？

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