包含动画选项时,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
    }
});