1

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

possible.is
  • 13
  • 2

1 Answers1

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()
});
adeneo
  • 312,895
  • 29
  • 395
  • 388
  • Thanks adeneo, thats pretty much what i was looking for. only weird thing is, that the browser doesn't let me scroll for a small amount of time, as if the scrolling is still active even if the window is there already. when i scroll, the window content starts to wiggle and only after a second i can actually scroll somewhere else. – possible.is Jan 19 '14 at 17:12