包含動畫選項時，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
    }
});