在對投資組合進行排序后，將Div高度平滑地動畫到其新高度

Question

我正在制作我的投資組合模板，但是我完全不熟悉JS，jquery和CSS轉換。 通過不同的教程了解並運行了這個（ http://pixellytrain.com/sortportfolio/index.html ）。 在對項目組合進行排序之后，我想使.blue div很好地滑動/緩和到.red div的新高度（例如，從“ all”到“ 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>

注意包裝器需要溢出： 在它的CSS。

1）單擊過濾器時，獲取.red的當前高度並將其設置為red的高度，這樣它就不會跳來跳去。

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

2）項目動畫完成后，將.red設置為animate（），使其與包裝器的高度相同。

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