Hide multiple elements with jQuery and get one callback

Question

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

The code I'm currently using to complete this task is pasted below.

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

A similar question ( jQuery multiple animate () callback ) was posted earlier, but the solution seems rather complicated for a seemingly 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 afaik animation.