jQuery：根据内容大小调整大小的动画容器答案

【问题标题】：jQuery: Animated container that resizes based on content sizejQuery：根据内容大小调整大小的动画容器
【发布时间】：2015-11-10 15:29:18
【问题描述】：

在这里，我正在尝试创建一个动画div 容器，该容器将根据内容大小和动画调整自身大小。问题是尺寸不能轻易计算，这使得很难使用常见的建议。

我在下面的链接上重现了整个问题，我正在寻找找到解决方案的提示。

https://jsfiddle.net/csj78rgo/2/

我首选的解决方法是 jQuery、jQuery-ui 或 Bootstrap JS。

HTML：

<div class="container">
    <div id="part1">
        <h3>TITLE</h3>
        <p>Some content</p>
        <p>Some content</p>
    </div>
    <div id="part2">
        <p>Some content</p>
    </div>
    <div id="part3">
        <p>Some content</p>
        <p>Some content</p>
    </div>
</div>

JS：

step = 0;
if (step==0) {
    $('#part1').show();
    $('#part2').hide();
    $('#part3').hide();
}  else if (step==1) {
    $('#part1').hide();
    $('#part2').show();
    $('#part3').hide();
} else if (step==2) {
    $('#part1').hide();
    $('#part2').hide();
    $('#part3').show();
}

CSS：

.container {
    border: 1px black solid
}

【问题讨论】：

不清楚您在寻找什么，可能是这样的：jsfiddle.net/csj78rgo/1?
是的，你得到了我正在寻找的解决方案，你能把它贴在这里...

标签： javascript jquery jquery-ui jquery-animate containers

【解决方案1】：

您不需要做任何花哨的事情来调整容器的大小，一旦您在其中隐藏内容，它就会自动调整大小。您可以使用 jQuery 的 .show() 和 .hide() 的 duration 参数来对内容进行动画处理。

var step = 0;
setInterval(function() {
  if (step==0) {
    $('#part1').show("slow");
    $('#part2').hide("slow");
    $('#part3').hide("slow");
  }  else if (step==1) {
    $('#part1').hide("slow");
    $('#part2').show("slow");
    $('#part3').hide("slow");
  } else if (step==2) {
    $('#part1').hide("slow");
    $('#part2').hide("slow");
    $('#part3').show("slow");
  }

  if(step++ == 3)
    step = 0;
}, 1000);

.container {
  border: 1px black solid
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div id="part1">
    <h3>TITLE</h3>
    <p>Some content</p>
    <p>Some content</p>
  </div>
  <div id="part2">
    <p>Some content</p>
  </div>
  <div id="part3">
    <p>Some content</p>
    <p>Some content</p>
  </div>
</div>

【讨论】：

【解决方案2】：

我会说使用类似于以下的逻辑；替换“$('#part1').show();”逻辑。

$('#part1').show();
var containerHeight = $('#part1').height();
$('#part1').hide();

$('#part2').hide();
$('#part3').hide();

$('.container').animate({height: containerHeight + "px"}, 400, "linear", function() {
    $('#part1').fadeIn(100);
});

前 3 行是为了解决一个仅限 FireFox 的错误，它不会检测元素的高度，除非它是可见的。通过显示它，获取高度，然后隐藏它.. 它发生得如此之快，它不会显示在浏览器上，但您可以获得动画高度。

动画有一个回调函数，它只会在容器大小调整到足以显示新元素后才会显示它。

它需要一些适应才能完全按照你的意愿去做，但应该有足够的空间让你明白这个想法。

【讨论】：