jQuery：如何在不知道高度的情况下进行高度变化动画？

Question

我想使用 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/

这段代码的意思是：当我点击 .first div时，显示 .item1 div；当我点击 .second div时，显示 .item2 div。这些div的高度不同，这意味着在隐藏/显示divs时容器的大小会发生变化。如何在不知道任何div大小的情况下动画实现高度变化？ps.如果有CSS解决方案，那就更好了。但我认为仅凭CSS是不可能实现的。

- RobinvdA

Answer 1

使用.show()和.hide()的可选参数，您可以实现所需的动画效果。您也可以将该参数作为毫秒传递。

尝试一下：

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

DEMO

- Rajaprabhu Aravindasamy

---

@RobinvdA 很高兴能帮忙！ - Rajaprabhu Aravindasamy

Answer 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()方法同时动画匹配元素的宽度、高度和不透明度。

- Vivek Sadh

Answer 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演示以获取结果。

- Pavel Štěrba

Answer 4

你需要的CSS解决方案是使用max-height和/或min-height。 这可能会有所帮助： css3 height transition on an absolute positioned div to overflow auto fails

- Mabedan

---

我看到一些解决方案使用了max/min-height。然而，我的页面不能有高度，甚至没有最大高度。 - RobinvdA