显示儿童时的jQuery幻灯片容器高度

Question

我有一个带有子元素的 div，除了第一个子元素之外，这些子元素都是隐藏的。

当他的孩子从无显示更改为显示时，我希望 div 容器向下滑动。

  <div class="container">
  <div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</div>
  <div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</div>
  <div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</div>  <div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</div>
  <div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</div>
  <div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</div>
  </div>

<button id="see_all">see all</button>

只需检查Here

Answer 1

如果您要寻找的只是滑动动画，那么只需更改

$('.container').find('.block').addClass('active');

到

$('.container').find('.block').slideDown(500);

如果您仍然需要打开的块具有 active 类，那么您可以在回调中设置它：

$('.container').find('.block').slideDown(500, function() {
  $(this).addClass('active');
});

PS：你的小提琴缺少 jQuery ;-)

编辑：下面的更新答案

如果您不希望所有块分别向下滑动，那么我们需要以不同的方式进行。

选项 1
最简单的选择是将隐藏块包装在另一个 div 中。然后我们可以简单地向下滑动这个新容器：

$('#see_all').on('click', function() {
  $('.container').find('.hidden-blocks').slideDown(500);
});

你的小提琴中的一个例子：https://jsfiddle.net/06ff3fon/3/

选项 2
如果出于某种原因，您不能包装其他块，那么我能想到的唯一选择是设置容器的高度，这样其他块就看不见了。然后我们为容器的高度设置动画，使其向下滑动，露出块。

$('#see_all').on('click', function() {
  var $container = $('.container');
  var containerHeight = $container.height() + 10;// +10 to fix silly collapsing bottom margin
  var $blocks = $container.find('.block');
  var totalBlockHeight = 0;
  $container.height(containerHeight);// this will overwrite the initial 'auto' height
  $blocks
    .addClass('active')
    .each(function() {
      totalBlockHeight += $(this).outerHeight(true);
    });
  $container.animate(
    { height: totalBlockHeight + 'px' },
    500,
    function() {}
  )
});

这里再举一个例子：https://jsfiddle.net/06ff3fon/2/