Question

我正在制作我的投资组合模板，但我完全不熟悉JS，jquery和CSS转换。得到这个（http://pixellytrain.com/sortportfolio/index.html）并运行不同的教程。我想将.blue div幻灯片/轻松地放到投资组合排序后的.red div的新高度上（例如从＆＃34;所有＆＃34;到＃34; cat a＆＃34;）。

类似于这个投资组合的页脚：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>

请注意，包装器需要溢出：hidden;在它的css。

1）点击过滤器后，获取.red的当前高度并设置红色的高度，然后它就不会跳转。

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

2）项目动画完成后，将.red设置为animate（），使其与包装器的高度相同。

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

在投资组合排序后，Div高度可以平滑地动画到新的高度

1 个答案: