jQuery анимирует несколько элементов

Question

Я пытаюсь сделать следующее:

У меня есть два набора элементов DOM на странице. Все элементы в первом сете несут класс display-element, и второй набор элементов несет класс edit-element.

Теперь у меня есть кнопка (id =edit-button) Когда я нажимаю эту кнопку, я хочу все display-elements исчезнуть, и все edit-elements появляться.

Я естественно сделал:

$('#edit-button').click(function(){
    $('.display-element').fadeOut(300, function() {
        $('.edit-element').fadeIn(300);
    });
});

Я обнаружил, что, к своему удивлению, что это не сработало, как и ожидалось. Вот что произошло: как только первый элемент с классом display-element исчез, все edit-elements начал исчезать.

Теперь есть какой -нибудь простой способ (возможно, что -то в документации, которую я пропустил), используя, что я могу иметь все edit-elements Начните исчезать Только в конце концов display-elements вышли?

Спасибо
младший

Answer 1

Почему это произойдет, правда? Я имею в виду, кажется, что вы начинаете анимацию одновременно (есть только один вызов .fadeOut В конце концов, верно?). Я думаю, это потому, что $ () дает массив и когда вы звоните .fadeOut, jquery итерация через массив и выполняет все, что он выполняет для каждого из его элементов. Начиная с первого. Поскольку обратный вызов «прикреплен» к каждой анимации, вы видите видимый эффект первого обратного вызова.

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

$('#edit-button').click(function(){
    var display_elements = $('.display-element');
    var len = display_elements.length;
    for (var i = 0; i < len-1; i++) {
        $(display_elements[i]).fadeOut(300); // no callback
    }
    $(display_elements[len-1]).fadeOut(300, function() {
        $('.edit-element').fadeIn(300);
    }); // last element - attach callback
});

Мне жаль, если код вышел, я должен признать, что мой JavaScript-Fu не очень сильный :)

Answer 2

Что ж, не нашел ни одного «изящного метода API», я решил это:

$('#edit-button').click(function() {
    var displays = $('.display-element');
    var counter = 0;
    var max = displays.length;
    displays.fadeOut(300, function() {
        counter++;
        if( counter>=max ) $('.input-element').fadeIn(300);
    }
});

По сути, это ответ @Shylent, с большим количеством Javascript-fu ':)

Answer 3

Решение состоит в том, чтобы использовать установку на функции Fading In Function

$('#edit-button').click(function(){
    $('.display-element').fadeOut(300);
setTimeout("$('.edit-element').fadeIn(300);", 300);
});

Эта функция JavaScript задержит триггер Fading In Function для 300 милисекундов

Answer 4

Я только что запустил аналогичную проблему и обнаружил, что вариант обратного вызова «шага» дал желаемое поведение.

Шаг: функция, которую можно вызвать после каждого шага анимации.

^ http://api.jquery.com/animate/

Прокрутите вниз до демонстрации для использования шага, и вы увидите, как он позволит вам вызвать анимат на одном объекте, затем используйте шаг, чтобы обновить остальные набор на каждом этапе анимации. Таким образом, у вас есть только один обратный вызов, когда анимация завершается.