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 tho才有可能。

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');
});

当您提供快速和慢等字符串值时，.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

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

4 个答案:

DEMO