jQuery $.animate() multiple elements but only fire callback once

Question

If you select a class or collection of elements to animate with jQuery:

$('.myElems').animate({....});

And then also use the callback function, you end up with a lot of unneccessary animate() calls.

var i=1;
$('.myElems').animate({width:'200px'}, 200, function(){
    //do something else
    $('#someOtherElem').animate({opacity:'1'}, 300, function(){        
        if (i>1) console.log('the '+i+'-th waste of resources just finished wasting your resources');
        i++;
    });
});

Arguably this is just bad code and / or design - but is there something I can do that both avoids having many animate() calls with only one of them using the callback, and having a load of unneccessary callbacks executing and screwing with my code / expected behaviour?

Ideally I'd just be able to code a single 'disposable' callback that will only run once - otherwise perhaps there is an efficient way to test if something is already being animated by jQuery?

Example: http://jsfiddle.net/uzSE6/ (warning - this will show a load of alert boxes).

define a flag variable either on file scope or somewhere accessible by the `animate()`. check it before `$("#someOtherElem').animate()` call and set it in it's body so `$("#someOtherElem').animate()` won't be invoked next time. — fardjad, Jan 09 '12 at 18:31

Yoshi · Accepted Answer · 2012-01-11T09:18:00.090

107

You could use when like:

$.when($('.myElems').animate({width: 200}, 200)).then(function () {
  console.log('foo');
});

http://jsfiddle.net/tyqZq/

Alternate version:

$('.myElems').animate({width: 200}, 200).promise().done(function () {
  console.log('foo');
});

edited Jan 11 '12 at 09:18

answered Jan 09 '12 at 18:50

Yoshi

51,516
13
81
100

7

I like this. I like this very much. I didn't know about these functions, this helped alot :) – totallyNotLizards Jan 10 '12 at 09:04
6

+1 I found it quite useful for `$('html, body').animate(...)` – Alvaro Oct 15 '14 at 16:15

score 2 · Answer 2 · answered Jan 09 '12 at 18:30

2

You can create a variable to block second+ callback...

var i=1;
$('.myElems').animate({width:'200px'}, 200, function(){
    //do something else
    $('#someOtherElem').animate({opacity:'1'}, 300, function(){        
        if (i>1) return;
        else
        {
            console.log('the '+i+'-th waste of resources just finished wasting your resources');
            i++;
        }
    });
});

This will only fire once as every subsequent callback will get canceled :)

answered Jan 09 '12 at 18:30

bardiir

13,882
9
38
63

3

I would suggest using a different variable name than `i`, which is common and likely to be accidentally overwritten, and setting it to `true` or `false` instead for clarity. – Blazemonger Jan 09 '12 at 18:32
1

^ Sure, but i used i as it was already available in the example code, i just used it slightly adjusted. From standpoints of clarity something like `callbackdone` set to boolean values would make much more sense. – bardiir Jan 09 '12 at 18:34

jQuery $.animate() multiple elements but only fire callback once

2 Answers2

Linked

Related