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/

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

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

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

Answer 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

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

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

Answer 4

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