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

Question

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

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

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

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

Answer 6

Идея моего решения - сохранить счетчик.Всякий раз, когда анимация заканчивается, вы просто увеличиваете этот счетчик, таким образом, вы можете видеть, когда вы наконец нажмете кнопку.Не забудьте установить счетчик на ноль, когда все будет сделано, потому что вы можете повторить это (скрыть их снова и показать их снова).

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