Question

I am hiding multiple items like this:

$('#item1,#item2,#item3').hide('slow',function() {
    console.log('hidden');
});

Problem is that this logs four times. For reasons beyond my control I cannot use a common class on each element. Is there a nice jquery-ish way to make this handler only fire after the last item has hidden? (or the first, since they should be virtually simultaneous)

Also, the elements will be hidden and shown many times, so whatever is used to limit the handler call will have to be reset afterwards.

I can obviously put some kind of boolean in the handler, but I was hoping for a cleaner solution.

Answer 1

You could use $.when() and deferred.done()

$.when($('#item1,#item2,#item3').hide('slow')).done(function() {
   console.log('hidden');
});

Simple working example