jquery window animate after masonry

Question

i am trying to get a window animate fired after a $container.masonry() is fully executed. basically i resize images in a masonry container on click, and want to scroll to the top of that resized image afterwards. here is a demo: http://www.possible.is/testumgebung/tester/

however, with the current setup:

$(".image").click(function(){ 
            $('.image').not(this).removeClass('big');
            $( this ).toggleClass('big');
            $.when( $container.masonry() ).done(function() { 
                $('html, body').animate({
                    scrollTop: $('.big').offset().top
                }, 500)
            }); 
        });

the window scrolls always to the position of the image before it was rearranged through masonry. my question is, how do i get it to scroll AFTER the whole masonry magic?

thanks in advance

matthias

Answer 1

masonry has a layoutComplete event that fires when all layout and transitions have completed. As far as I know it does not return a promise, so $.when will probably not be very useful :

$(".image").on('click', function(){ 
    $('.image').not(this).removeClass('big');
    $( this ).toggleClass('big');
    $container.masonry( 'on', 'layoutComplete', function() {
        $('html, body').animate({
            scrollTop: $('.big').offset().top
        }, 500)
    }); 
    $container.masonry()
});