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 выцветал?

Благодаря
JRH

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-фу не очень сильно :)

Answer 2

Решение использовать SetTimeout на замирания в функции

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

эта функция Javascript задержит триггером замирания в функции 300 милисекунд

Answer 3

Ну, не найдя какой-либо «отличный метод 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-фу» :)

Answer 4

Я просто побежал подобный вопрос и нашел «шаг» вариант обратного вызова давал желаемое поведение.

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

^

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