Question

我有一个带有子元素的div，除了第一个孩子外，它们都是隐藏的。

当他的孩子从display none更改为show时，我希望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/

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

1 个答案: