JQuery - отменить обратный вызов до завершения нескольких анимаций

Мне нужно, чтобы обратный вызов выполнялся один раз после того, как несколько элементов завершили анимацию. Мой селектор jquery выглядит следующим образом:

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

Проблема заключается в том, что класс кнопок соответствует нескольким элементам, все из которых необходимо пометить до того, как будет выполнен обратный вызов. Теперь, как и сейчас, обратный вызов выполняется после того, как каждый отдельный элемент завершил анимацию. Это НЕ желаемая функция. Я ищу элегантное решение, так что мой обратный вызов выполняется только один раз после того, как все согласованные элементы закончили анимацию. Этот вопрос появился в нескольких местах, включая SO, но никогда не было изящного ответа (и даже окончательного ответа на этот счет - решения, которые работают для одного человека, вообще не работают для других).

Ответ 1

Альтернативой ответу @Ross, который всегда будет вызывать обратный вызов на последней кнопке, чтобы затухать (которая может быть или не быть последней кнопкой, которая была передана анимации), может быть:

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

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

Ответ 2

jQuery представил promise в версии 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
});

Ответ 3

Для сбора несвязанных анимаций элементов в один обратный вызов вы можете сделать это:

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

Ответ 4

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

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

Неподтвержденный, но для этого должен применяться обратный вызов только для последней кнопки.

Ответ 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++;
    }
});

Ответ 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");
        }
    });
};