Как вызвать функцию после fadeOut() для многих элементов

У меня есть этот код:

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

и я бы хотел вызвать это оповещение только тогда, когда ВСЕ .hotel_photo_select являются fadeOuted (так, скрыто).

Как я могу это сделать? С моим кодом вызывается предупреждение после первого элемента fadeout...

Ответ 1

Вы можете использовать метод prom() для этого (на странице документа есть хороший пример).

Метод .promise() возвращает динамически сгенерированное обещание, которое разрешено после того, как все действия определенного типа связаны с коллекцией, в очереди или нет, закончились.

Применительно к вашему примеру должно быть что-то вроде этого:

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

Ответ 2

Использование функций jQuery $.when().then().

$(document).ready(function(){
  // using When & then methods.
  $.when($('.box').fadeOut())
   .then(function(){
      alert("All Boxes : Faded Out.");
   });
});

.box{
    color: white;
    background-color: red;
    width: 100px;
    height: 100px;
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <title>Calling Alert After fadeOut</title>
  </head>
  <body>
    <div class="box">Box 1</div> <br />
    <div class="box">Box 2</div> <br />
    <div class="box">Box 3</div> <br />
    <div class="box">Box 4</div> <br />
    <div class="box">Box 5</div>
  </body>
 </html>