JQuery анимация нескольких элементов - PullRequest
Новая
       12

JQuery анимация нескольких элементов

0 голосов
/ 09 января 2010

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

У меня есть два набора элементов 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 исчезли?

Спасибо
JRH

Ответы [ 4 ]

3 голосов
/ 09 января 2010

Ну, не найдя никакого «изящного 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:)

0 голосов
/ 20 марта 2012

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

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

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

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

0 голосов
/ 09 января 2010

Решение состоит в том, чтобы использовать setTimeout для функции затухания 

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

Эта функция javascript будет задерживать запуск функции замирания на 300 миллисекунд

0 голосов
/ 09 января 2010

Почему это произошло, правда? Я имею в виду, похоже, что вы запускаете анимацию одновременно (в конце концов, есть только один вызов .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 не очень силен:)

...