Hide multiple elements with jQuery and get one callback

Question

The question is pretty straightforward. If I select two or more elements with jQuery and, for example, use jQuery's fadeOut() function to hide them, the callback function is invoked twice (for each element). Is there a way to only receive one callback?

The code I am currently using to perform this task is pasted below.

$('#element-1, #element-2').fadeOut( 250, function() { /* Callback invoked twice. */ });

A similar question has been posted before (jQuery multiple animate() callback), but the solution seems quite complicated for what seems a simple problem.

Answer 1

You can use $.when ^[docs] (deferred objects):

$.when($('#element-1, #element-2').fadeOut(250)).then(function() {
    // do something
});

DEMO

This works with any animation afaik.