1

構築しようとしているサイトに、DavidDeSandroのJQueryMasonryプラグインを実装しています。石積み関数でコールバックを実行しようとしています。これにより、実行後にページの関連部分にスクロールできますが、アニメーションをオンにすると、何らかの理由で機能しません。ドキュメントは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?");
}
);

私が困惑しているときにアニメーションが完了するまでアラートが発生しないようにする方法について、誰かが私に教えてくれるポインターを本当に感謝します！どうもありがとうございました、

デイブ

4

1 に答える 1

6

あなたにできることがありますが、あなたの感覚でそれを機能させるには、小さなハックが必要です。

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-20T21:04:11.420 に答える