javascript Jquery - 推迟回调，直到多个动画完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5220878/
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
Jquery - defer callback until multiple animations are complete
提问by Richard
I need a callback to execute once after multiple elements have finished animating. My jquery selector is as follows:
我需要在多个元素完成动画后执行一次回调。我的 jquery 选择器如下：
$('.buttons').fadeIn('fast',function() {
// my callback
});
The problem with this is that the buttons class matches a number of elements, all of which need to be faded in before the callback is executed. As it stands now, the callback is executed after each individual element has finished animating. This is NOT the desired function. I'm looking for an elegant solution such that my callback is only executed once after all the matched elements have finished animating. This question has popped up in a few places including SO, but there's never been an elegant answer (nor even a definitive answer for that matter - solutions that work for one person don't work at all for others).
这样做的问题是按钮类匹配许多元素，所有这些元素都需要在执行回调之前淡入。就目前而言，回调在每个单独的元素完成动画后执行。这不是所需的功能。我正在寻找一个优雅的解决方案，这样我的回调只在所有匹配的元素完成动画后执行一次。这个问题已经出现在包括 SO 在内的几个地方，但从来没有一个优雅的答案（甚至没有一个明确的答案 - 对一个人有用的解决方案对其他人根本不起作用）。
采纳答案by Riley Dutton
An alternative to @Ross's answer that will always trigger the callback on the last button to fade in (which may or may not be the last button that was told to animate) could be:
@Ross 的答案的替代方案将始终触发最后一个按钮上的回调淡入（这可能是也可能不是被告知要设置动画的最后一个按钮）可能是：
var buttons = $(".buttons");
var numbuttons = buttons.length;
var i = 0;
buttons.fadeIn('fast', function() {
i++;
if(i == numbuttons) {
//do your callback stuff
}
});
回答by Sebastian Patten
jQuery introduced a promisein version 1.6 and is far more elegant than adding counters.
jQuery在 1.6 版本中引入了一个promise，并且比添加计数器要优雅得多。
Example:
例子：
// Step 1: Make your animation
$(".buttons").each(function() {
$(this).fadeIn("fast");
});
// Step 2: Attach a promise to be called once animation is complete
$(".buttons").promise().done(function() {
// my callback
});
回答by parliament
For collecting unrelated element animations into a single callback you can do this:
要将不相关的元素动画收集到单个回调中，您可以这样做：
$.when(
$someElement.animate(...).promise(),
$someOtherElement.animate(...).promise()
).done(function() {
console.log("Both animations complete");
});
回答by Ross
var $buttons = $('.buttons');
$buttons.each( function (index) {
if ( index == $buttons.length - 1 ) {
$(this).fadeIn('fast',function() {
// my callback
});
} else {
$(this).fadeIn('fast');
}
});
Untested but this should apply the callback to the last button only.
未经测试，但这应该仅将回调应用于最后一个按钮。
回答by kapa
The idea behind my solution is to keep a counter. Whenever an animation finishes, you simply increment this counter, thus you can see when you are at last button. Remember to set the counter back to zero when everything is done, because you might want to repeat this (hide them again, and show them again).
我的解决方案背后的想法是保留一个计数器。每当动画结束时，您只需增加这个计数器，这样您就可以看到最后一个按钮的时间。记住在完成所有操作后将计数器设置为零，因为您可能想要重复此操作（再次隐藏它们，然后再次显示它们）。
var $buttons=$('.buttons'),
button_n=$buttons.length,
button_counter=0;
$buttons.fadeIn('fast', function () {
if (button_counter==button_n-1) {
alert('It is all done!');
button_counter=0;
} else {
button_counter++;
}
});
回答by Fco Diaz
onClickBtnEdit = function(){
var $EditDel = $($btnEdit).add($btnDel);
var btns = $EditDel.size();
$EditDel.fadeOut("def",function(){
btns--;
if(btns===0){
$($btnSave).add($btnCancel).fadeIn("slow");
}
});
};
