javascript - 对投资组合进行排序后，div 高度可以平滑地动画到新的高度

Question

我正在制作我的投资组合模板，但我完全不熟悉 JS、jquery 和 CSS 转换。通过不同的教程启动并运行此 ( http://pixellytrain.com/sortportfolio/index.html)。我想让 .blue div 在投资组合排序后很好地滑动/缓和到 .red div 的新高度(例如，从“全部”到“cat a”)。

类似于此投资组合的页脚:http://hogash-demo.com/kallyas_wp/features/portfolio/sortable-layout/当投资组合变短时，可以很好地滑入。

由于 Queness 上的投资组合教程，我已经将 jquery、mixitup.js 和 easing.js 链接到页面。

我随机尝试了这个，但它什么也没做，所以我不确定如何开始，或者我是否走在正确的轨道上。先谢谢各位好心的亲们!!

        $('.filter').click(function () {
            $('.red').slideToggle('8000', "easeOutBounce", function () {
         });
        });

Answer 1

http://jsfiddle.net/XY2Ju/

这是一个有效的实现。享受吧!

0) 创建将所有内容都包装在 .red 中的内容。

<div class="red">
  <div class="wrapper">
    <all the stuff that makes your portfolio>
  </div>
</div>

注意包装器需要 overflow: hidden;在它的 CSS 中。

1)当filter被点击的时候，获取.red的当前高度，设置red的高度给它，那么它就不会跳来跳去了。

$('.red').height($('.wrapper').height());
// The portfolio moves around

2)item的动画完成后，将.red设置为animate()与wrapper等高

$('.red').animate({'height': $('.wrapper').height()}, 250);