Question

I’ve seen a couple of questions here regarding this, (including using when/promise solutions), but they didn’t seem to work. Basically I’m animating multiple elements at once, and calling a function inside of the callback, but the function is being called multiple times – for each element being animated… Here’s my code:

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

I’ve attempted:

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

which didn’t work. I’ve also attempted a solution with when, but that seemed to throw off my function call (which positions additional elements based on the final animated size of the OBJCollection). I’m not sure (since this was the first time I used when/promise), but is it firing the callback once after the first item is done animating and ignoring all others? It seems like that is what it’s doing, but I’m looking for a solution that fires the callback when all items are done animating….

Any ideas?

Answer 1

Use a promise object.

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