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

Question

我在这里尝试创建一个动画 div 容器，它会根据内容大小和动画调整自身大小。问题是无法轻松计算大小，这使得很难使用常见的建议。

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

我首选的解决方法是 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
}

Answer 1

我会说使用类似于下面的逻辑；替换“$('#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 独有的错误，它不会检测元素的高度，除非它是可见的。通过显示它，获取高度，然后隐藏它..它发生得太快了，它不会在浏览器上显示，但你可以获得动画的高度。

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

它需要一些调整才能完全按照您的要求进行调整，但应该有足够的内容让您理解。

Answer 2

您不需要做任何花哨的事情来调整容器的大小，一旦您将内容隐藏在其中，它就会自动调整自己的大小。您可以使用 jQuery 的 .show() and .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>

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

jQuery: Animated container that resizes based on content size

javascript

jquery

containers

jquery-ui

jquery-animate