當包含動畫選項時，Jquery回調不起作用（masonry插件）

我正在爲我正在嘗試構建的網站實現David DeSandro的JQuery Masonry插件。我試圖在砌體功能上運行回調，以便在運行後可以滾動到頁面中的相關部分，但由於某種原因，無法在啓用動畫時使其工作。該文檔可以在http://desandro.com/demo/masonry/docs/#options看到。當我運行下面的代碼，它工作正常和警報只會發生一次砌築功能運行：當包含動畫選項時，Jquery回調不起作用（masonry插件）

$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?"); 
} 
);

我真的很感激任何人都可以給我關於如何防止警報發生，直到動畫完成，因爲我難倒了指針！非常感謝您的幫助，

戴夫

來源

2011-01-20 deshg

你檢查速度變量是否正確定義？ – 2011-01-20 17:28:12

是的速度變量是正確定義的，砌體代碼和動畫完美運行，只是警報不會等到動畫完成之前運行（如果動畫已打開）。非常感謝您的幫助，任何其他想法將不勝感激！ – deshg 2011-01-20 18:36:26

有些事可以做，但它在你的意識的工作，需要一個小黑客：

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

來源

2011-01-20 21:04:11 polarblau

當包含動畫選項時，Jquery回調不起作用（masonry插件）

回答

相關問題