jQuery：如何在没有已知高度的情况下动画高度变化？

Posted 2023-03-06

【中文标题】jQuery：如何在没有已知高度的情况下动画高度变化？

【英文标题】：jQuery: How to animate height change without known heights?

【发布时间】：2014-03-19 20:17:01

【问题描述】：

我想使用 jQuery 对高度变化进行动画处理（当我隐藏/显示 div 时）。我在 SO 上找到了一些示例，但我无法让它们发挥作用。

假设我有一个容器，里面有一些 div。

HTML：

<div class="container">
  <div class="first">Show first div</div>
  <div class="second">Show second div</div>
  <div class="item1">
     Some text
  </div>
  <div class="item2">    
     Some multiline<br />text
  </div>
</div>

jQuery：

$('.first').on('click',function()
  $('.item2').hide();
  $('.item1').show();
);
$('.second').on('click',function()
  $('.item1').hide();
  $('.item2').show();
);

http://jsfiddle.net/ytW69/2/

当我单击 div .first 时，我想显示 div .item1，当我单击 div .second 时，我想显示 div .item2。这些 div 的高度不同，这意味着当我隐藏/显示 div 时，容器的大小会发生变化。

如何在不知道任何 div 大小的情况下为这种高度变化设置动画？

ps。如果有 CSS 解决方案，那就更好了。我认为仅使用 CSS 是不可能的。

【参考方案1】：

使用.show()和.hide()的可选参数，可以实现你想要的动画效果。您也可以将该参数作为milliseconds 传递。

试试，

$('.first').on('click',function()
    $('.item2').hide('slow');
    $('.item1').show('slow');
);
$('.second').on('click',function()
    $('.item1').hide('slow');
    $('.item2').show('slow');
);

DEMO

【讨论】：

@RobinvdA 很高兴为您提供帮助！

【参考方案2】：

你可以试试这个：-

$('.first').on('click',function()
    $('.item2').hide('fast');
    $('.item1').show('fast');
);
$('.second').on('click',function()
    $('.item1').hide('fast');
    $('.item2').show('fast');
);

当您提供 fast 和 slow 之类的字符串值时，.show() 将成为动画方法。 .show() 方法同时为匹配元素的宽度、高度和不透明度设置动画。

【参考方案3】：

如果你想要更好看的效果（在我看来），你可以使用slideDown()和slideUp()：

$('.first').on('click', function () 
    $('.item1:hidden').slideDown('slow');
    $('.item2:visible').slideUp('slow');
);

$('.second').on('click', function () 
    $('.item2:hidden').slideDown('slow');
    $('.item1:visible').slideUp('slow');
);

查看此JSFiddle 演示以获得结果。

【参考方案4】：

您正在寻找的 CSS 解决方案是使用最大高度和/或最小高度。 这可能会有所帮助： css3 height transition on an absolute positioned div to overflow auto fails

【讨论】：

我遇到了一些使用最大/最小高度的解决方案。但是我的页面不能有高度，甚至没有最大高度