Question

我有这段代码：

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

我只有在所有 .hotel_photo_select fadeOuted（因此，隐藏）时才会发出提醒。

我该怎么办？使用我的代码，在第一个元素为淡出后调用警报...

Answer 1

您可以使用promise()方法（文档页面有一个很好的示例）。

.promise（）方法返回一个动态生成的Promise 一旦绑定到集合的某个类型的所有操作解决，排队与否，已经结束。

应用于您的示例应该是这样的：

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

Answer 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>

Answer 3

$(element).fadeOut(duration, onComplete)

示例：

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

如何在许多元素上的fadeOut（）之后调用函数

3 个答案: