Question

在多个元素完成动画制作后，我需要一个回调来执行一次。我的jquery选择器如下：

$('.buttons').fadeIn('fast',function() {
   // my callback
});

这个问题是按钮类匹配了许多元素，所有这些元素都需要在执行回调之前淡入。现在，在每个单独的元素完成动画之后执行回调。这不是所需的功能。我正在寻找一个优雅的解决方案，这样我的回调只在所有匹配元素完成动画后执行一次。这个问题已经出现在包括SO在内的一些地方，但是从来没有一个优雅的答案（甚至也没有一个明确的答案 - 对一个人起作用的解决方案对其他人来说根本不起作用）。

Answer 1

jQuery在1.6版本中引入了promise，并且比添加计数器更优雅。

示例：

// 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
});

Answer 2

要将不相关的元素动画收集到一个回调中，您可以执行以下操作：

$.when(
    $someElement.animate(...).promise(),
    $someOtherElement.animate(...).promise()
).done(function() {
    console.log("Both animations complete");
});

Answer 3

@ Ross的答案的替代方案将始终触发最后一个淡入按钮的回调（可能是也可能不是被告知动画的最后一个按钮）：

var buttons = $(".buttons");
var numbuttons = buttons.length;
var i = 0;

buttons.fadeIn('fast', function() {
    i++;
    if(i == numbuttons) {
        //do your callback stuff
    }
});

Answer 4

var $buttons = $('.buttons');

$buttons.each( function (index) { 
    if ( index == $buttons.length - 1 ) {
        $(this).fadeIn('fast',function() {
           // my callback
        });
    } else {
        $(this).fadeIn('fast');
    }
});

未经测试，但这应该仅将回调应用于最后一个按钮。

Answer 5

我的解决方案背后的想法是保持一个反击。每当动画结束时，您只需递增此计数器，就可以看到您何时处于最后一个按钮。记住在完成所有操作后将计数器设置为零，因为您可能需要重复此操作（再次隐藏它们并再次显示它们）。

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++;
    }
});

Answer 6

onClickBtnEdit = function(){
    var $EditDel = $($btnEdit).add($btnDel);
    var btns = $EditDel.size();

    $EditDel.fadeOut("def",function(){                   
        btns--;
        if(btns===0){
            $($btnSave).add($btnCancel).fadeIn("slow");
        }
    });
};

Jquery - 延迟回调，直到完成多个动画

6 个答案: