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

i in midst of making portfolio template not familiar js, jquery , css transitions. got ( http://pixellytrain.com/sortportfolio/index.html) , running through different tutorials. make .blue div slide/ease nicely new height of .red div after portfolio sorted (e.g. "all" "cat a").

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

due portfolio tutorial on queness, have got jquery, mixitup.js , easing.js linked page.

i tried randomly doing nothing not sure how going or whether on right track. thank kind-hearted pros in advance!!

        $('.filter').click(function () {             $('.red').slidetoggle('8000', "easeoutbounce", function () {          });         }); 

http://jsfiddle.net/xy2ju/

here working implementation. enjoy!

0) create wraps inside .red.

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

notice wrapper needs overflow: hidden; in it's css.

1) when filter clicked, .red's current height , set red's height it, won't jump around.

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

2) after animation of items complete, set .red animate() same height wrapper.

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