JQuery Animando vários elementos

Question

Estou tentando fazer o seguinte:

Eu tenho dois conjuntos de elementos DOM em uma página. Todos os elementos no primeiro conjunto carregam a classe display-element, e o segundo conjunto de elementos carregam a classe edit-element.

Agora eu tenho um botão (id =edit-button). Quando eu clico neste botão, eu quero todo o display-elements para desaparecer, e todo o edit-elements aparecer.

Eu naturalmente fiz:

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

Descobri, para minha surpresa, que isso não funcionou como esperado. Foi o que aconteceu: assim que o primeiro elemento da classe display-element desbotou, todo o edit-elements começou a desaparecer.

Agora existe alguma maneira fácil (talvez algo na documentação que eu perdi) usando que eu posso ter todo o edit-elements Comece a desaparecer Somente depois de tudo display-elements desbotou?

Obrigado
jrh

Answer 1

Por que isso aconteceria, realmente? Quero dizer, parece que você está começando as animações ao mesmo tempo (há apenas uma chamada para .fadeOut Afinal, certo?). Eu acho que isso ocorre porque $ () produz uma matriz e quando você liga .fadeOut, JQuery itera através da matriz e executa o que ele executa para cada um de seus elementos. A partir do primeiro. Como o retorno de chamada é "anexado" a cada animação, você vê o efeito visível do primeiro retorno de chamada.

Eu acho que você pode evitar isso iterando a matriz dos elementos devolvidos e certificando -se de que você anexe o retorno de chamada apenas ao último.

$('#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
});

Lamento se o código está desligado, devo admitir que meu JavaScript-fu não é muito forte :)

Answer 2

Bem, não tendo encontrado nenhum 'método Nifty API', resolvi isso:

$('#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);
    }
});

Esta é essencialmente a resposta de @Shylent, com mais 'javascript-fu' :)

Answer 3

A solução é usar um Settimeout no desbotamento em função

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

Essa função JavaScript atrasará o gatilho do desbotamento em função por 300 milissegundos

Answer 4

Acabei de executar um problema semelhante e encontrei a opção de retorno de chamada "passo" produzia o comportamento desejado.

Etapa: uma função a ser chamada após cada etapa da animação.

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

Role para baixo até a demonstração para o uso da etapa e você verá como ele permitirá que você chama o Animate em um único objeto e use a etapa para atualizar o restante em cada etapa da animação. Dessa forma, você só tem um retorno de chamada quando a animação é concluída.