Div height to animate smoothly to its new height after portfolio is sorted

Question

I am in the midst of making my portfolio template but I am completely not familiar with JS, jquery and CSS transitions. Got this ( http://pixellytrain.com/sortportfolio/index.html) up and running through different tutorials. I would like to make the .blue div slide/ease nicely to the new height of the .red div after the portfolio is sorted (e.g. from "all" to "cat a").

Something like how the footer of this portfolio: http://hogash-demo.com/kallyas_wp/features/portfolio/sortable-layout/ slide in nicely when the portfolio become shorter.

Due to the portfolio tutorial on Queness, I already have got jquery, mixitup.js and easing.js linked to the page.

I tried this randomly but it was doing nothing so I am not sure how to get going or whether I am even on the right track. Thank you to all you kind-hearted pros in advance!!

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

Answer 1

http://jsfiddle.net/XY2Ju/

Here is a working implementation. Enjoy!

0) Create something that wraps everything inside .red.

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

Notice that the wrapper needs overflow: hidden; in it's css.

1) When the filter is clicked, get .red's current height and set red's height to it, then it won't jump around.

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

2) After the animation of the items is complete, set .red to animate() to the same height as the wrapper.

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