Question

I have this code :

$('.hotel_photo_select').fadeOut(500, function () {
    alert("Now all '.hotel_photo_select are hidden'");
});

and I’d like to call that alert only when ALL .hotel_photo_select are fadeOuted (so, Hidden).

How can I do it? With my code the alert is called after the first element is fadeout…

Answer 1

You can use the promise() method for this (the doc page has a good example for this).

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.

Applied to your example should be something like this:

$.when(
    $('.hotel_photo_select').fadeOut(500)
).done(function() {

    alert("Now all '.hotel_photo_select are hidden'");

});

OR

$('.hotel_photo_select').fadeOut(500)
    .promise().done(function() {
        alert('Got this far!');
    });