How to call a function after a fadeOut() on many elements

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'"); }); 

Answer 2

$(element).fadeOut(duration, onComplete) 

Example:

$('#box').fadeOut(400, () => { console.log('Fade effect is done') })