Jquery callback not working when animation options are included (masonry plugin)

Question

I am implementing David DeSandro's JQuery Masonry plugin for a site i'm trying to build. I am trying to run a callback on the masonry function so that i can scroll to the relevant part in the page after it runs but for some reason can't get it to work when I have the animation turned on. The docs can be seen at http://desandro.com/demo/masonry/docs/#options . When I run the following code it works fine and the alert only happens once the masonry function has run:

$wall.masonry(
{
columnWidth: 216,
itemSelector: '.box:not(.invis)',
animate: false
},
function()
{
alert("Finished?");
}
);

However when i run the following code with the animation options included the alert runs before the animation has finished:

$wall.masonry(
{
columnWidth: 216,
itemSelector: '.box:not(.invis)',
animate: true,
animationOptions: {
  duration: speed,
  queue: false
}
},
function()
{
alert("Finished?");
}
);

I would really appreciate any pointers anyone can give me as to how to prevent the alert happening until the animation has completed as i'm stumped! Thanks so much for your help,

Dave

Answer 1

There's something you can do, but it to work in your sense requires a small hack:

The object to animationOptions passed can take a complete property, which defines a function which will be fired after the animation is complete.

The problem is , this will be the case for each and every of your blocks, since every block is animated separately. But you could get around this like so:

var boxCount = $wall.find('box').size(),
    counter = 0,
    onComplete = function() {
        if (counter < boxCount) counter++;
        else {
            alert("Finished?"); // <-- Here goes your actual callback!
            counter = 0;
        }
    }

$wall.masonry({
    columnWidth: 216,
    itemSelector: '.box:not(.invis)',
    animate: true,
    animationOptions: {
        duration: speed,
        queue: false,
        complete: onComplete
    }
});