jquery animation callback called once instead of for each element

Question

$($('div').children()).animate({opacity:"0"},
                        function(){
                                $(this).remove();
                                $('div').append('new content');
                            }
                        );

New content is getting doubled every time, how would I go about making the callback function only fire once instead of for each child?

FYI, you don't have to pass `$('div').children()` to jQuery again, just chain the call: `$('div').children().animate(...)`. — Felix Kling, Jun 29 '13 at 16:17
More duplicates: http://stackoverflow.com/q/909526/218196, http://stackoverflow.com/q/8790752/218196 — Felix Kling, Jun 29 '13 at 16:19

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

Use .promise along with .done:

From the documentation:

The .promise() method returns a dynamically generated Promise that is resolved once all actions of a certain type bound to the collection, queued or not, have ended.

By default, type is "fx", which means the returned Promise is resolved when all animations of the selected elements have completed.

So the usage would be:

$(myElements).animate(...).promise().done(function() {
    // called only when _all_ of the animations on
    // "myElements" elements have completed
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 29 '13 at 16:16

Alnitak

334,560
70
407
495

It's a duplicate though `:-/` – Felix Kling Jun 29 '13 at 16:18
So it is, although the accepted answer on the first question you mentioned is over the top for this example. – Alnitak Jun 29 '13 at 16:19
That's why I pointed out to use the other answer. All the questions I found so far mention `.promise().done` at some point. Just saying. We don't need more of those IMO. – Felix Kling Jun 29 '13 at 16:20
very few of them have it as the accepted answer, unfortunately :( – Alnitak Jun 29 '13 at 16:21

jquery animation callback called once instead of for each element

1 Answers1