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 () { }); });
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);
Comments
Post a Comment