jquery 显示子项时滑动容器高度

Question

我有一个 div 有 children 个元素，除了第一个 child。

我想要一个div容器在他的children从显示none变为显示时下滑。

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

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

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

PS: 你的 fiddle 不见了 jQuery ;-)

编辑：更新下面的答案

如果你不想让所有方块单独滑下，那么我们需要换一种方式。

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

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

您的 fiddle 中的示例：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() {}
  )
});

再次在您的 fiddle 中举个例子：https://jsfiddle.net/06ff3fon/2/

jquery 显示子项时滑动容器高度

jquery slide container height when childrens are shown

jquery

css-animations

jquery-animate