Jquery – 延迟回调，直到完成多个动画
在多个元素完成动画制作后，我需要一个回调来执行一次。 我的jquery选择器如下：
$('.buttons').fadeIn('fast',function() { // my callback }); 这个问题是按钮类匹配了许多元素，所有这些元素都需要在执行回调之前淡入。 就目前而言，回调是在每个元素完成动画后执行的。 这不是所需的function。 我正在寻找一个优雅的解决方案，这样我的回调只在所有匹配的元素完成动画后执行一次。 这个问题已经出现在包括SO在内的一些地方，但是从来没有一个优雅的答案（甚至也没有一个明确的答案 – 对一个人有用的解决方案对其他人来说根本不起作用）。
替换@ Ross的答案总会触发最后一个按钮淡入的回调（可能是也可能不是被告知动画的最后一个按钮）可能是：
var buttons = $(".buttons"); var numbuttons = buttons.length; var i = 0; buttons.fadeIn('fast', function() { i++; if(i == numbuttons) { //do your callback stuff } });
jQuery在版本1.6中引入了一个承诺 ，并且比添加计数器更优雅。
例：
// 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 });
要将不相关的元素动画收集到单个回调中，您可以执行以下操作：
$.when( $someElement.animate(...).promise(), $someOtherElement.animate(...).promise() ).done(function() { console.log("Both animations complete"); });
var $buttons = $('.buttons'); $buttons.each( function (index) { if ( index == $buttons.length - 1 ) { $(this).fadeIn('fast',function() { // my callback }); } else { $(this).fadeIn('fast'); } });
未经测试但这应该仅将回调应用于最后一个按钮。
我的解决方案背后的想法是保持一个柜台。 每当动画结束时，您只需递增此计数器，就可以看到最后一个按钮的时间。 记住在完成所有操作后将计数器设置回零，因为您可能想要重复此操作（再次隐藏它们并再次显示它们）。
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++; } });
onClickBtnEdit = function(){ var $EditDel = $($btnEdit).add($btnDel); var btns = $EditDel.size(); $EditDel.fadeOut("def",function(){ btns--; if(btns===0){ $($btnSave).add($btnCancel).fadeIn("slow"); } }); };