jQuery 如何在许多元素上的淡出（）之后调用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7259608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call a function after a fadeOut() on many elements
提问by markzzz
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_selectare fadeOuted (so, Hidden).
并且我只想在所有.hotel_photo_select都淡出（因此，隐藏）时才调用该警报。
How can I do it? With my code the alert is called after the first element is fadeout...
我该怎么做？使用我的代码，在第一个元素淡出后调用警报...
回答by BrokenGlass
You can use the promise()method for this (the doc page has a good example for this).
您可以为此使用promise()方法（文档页面有一个很好的例子）。
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.
.promise() 方法返回一个动态生成的 Promise，一旦绑定到集合的特定类型的所有操作（无论是否排队）都结束，该 Promise 将被解析。
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'");
});
回答by Rehan Shah
Using jQuery $.when().then()functions.
使用 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>