包含动画选项时，jQuery回调不起作用（砌体插件）

Question

我正在为我要建立的网站实施David DeSandro的JQuery Masonry插件。 我正在尝试在砌筑函数上运行回调，以便在它运行后可以滚动到页面中的相关部分，但由于某种原因，当我打开动画时无法使其正常工作。 可以在http://desandro.com/demo/masonry/docs/#options中查看该文档。 当我运行以下代码时，它可以正常工作，并且仅在砌石功能运行后才发出警报：

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

但是，当我运行以下包含动画选项的代码时，警报将在动画完成之前运行：

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

我真的很感激任何人都可以给我的关于如何防止警报发生的指针，直到我陷入困境时动画才完成！ 非常感谢你的帮助，

戴夫

Answer 1

您可以做一些事情，但要按照您的意愿进行工作，需要进行一些改动：

传递给animationOptions的对象可以采用complete属性，该属性定义一个函数，该函数将在动画完成后触发。

问题是 ，每个块都是这种情况，因为每个块都是单独设置动画的。 但是您可以这样解决：

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
    }
});