2

これに関するいくつかの質問をここで見ました (when/promise ソリューションの使用を含む) が、うまくいかなかったようです。基本的に、一度に複数の要素をアニメーション化し、コールバック内で関数を呼び出していますが、関数は複数回呼び出されています-アニメーション化されている要素ごとに...ここに私のコードがあります:

OBJCollection.css({
    'width': '0em',
    'height': '0em'
}).animate({
    'width': Screens.ImageW / 16 + 'em',
    'height': Screens.ImageH / 16 + 'em'
}, {
    duration: Screens.currentImageParent.data('LightboxFadeSpeedIn'),
    queue: false,
    step: function (now, fx) {
        componentScaler();
    },
    complete: function () {
        $Content.show('fade', Screens.currentImageParent.data('ContentFadeSpeedIn'));
        //calling function here
    }
});

私が試みた：

if (!OBJCollection.is(':animated')) { ... call function }

うまくいきませんでした。私も when を使用して解決策を試みましたが、関数呼び出し (OBJCollection の最終的なアニメーション サイズに基づいて追加の要素を配置する) が失敗したようです。よくわかりませんが (when/promise を使用したのはこれが初めてだったので)、最初のアイテムのアニメーション化と他のすべてのアイテムの無視が完了した後、コールバックを 1 回起動していますか? それがやっていることのようですが、すべてのアイテムのアニメーション化が完了したときにコールバックを起動するソリューションを探しています....

何か案は？

4

1 に答える 1

5

promiseオブジェクトを使用します。

OBJCollection.css({
    'width': '0em',
    'height': '0em'
}).animate({
    'width': Screens.ImageW / 16 + 'em',
    'height': Screens.ImageH / 16 + 'em'
}, {
    duration: Screens.currentImageParent.data('LightboxFadeSpeedIn'),
    queue: false,
    step: function(now, fx) {
        componentScaler();
    }
}).promise().done(function() {
    $Content.show('fade', Screens.currentImageParent.data('ContentFadeSpeedIn'));
    //calling function here
});​
于 2012-09-13T21:23:39.827 に答える