当儿童显示时，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然后您可以在callb中设置它ACK：

$('.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/