JQuery: desaparecendo, executando uma ação e depois desaparecendo

Question

Então, eu tenho o que equivale a uma forma html, mas não é um verdadeiro <form>, por si só. Eu tenho um botão 'claro' que estou usando atualmente para redefinir todos os campos de volta aos seus padrões.

Do ponto de vista estético, gostaria que o formulário desapareça, seja redefinido enquanto "se foi" e desapareceu em reinicialização completamente. Eu tenho esse código até agora para tentar conseguir isso:

function Reset() {

    $formDiv.fadeOut(function() {

        // perform reset actions here
        $(this).fadeIn()
    });
}

No entanto, o que acontece é que, à medida que a div está desaparecendo, os campos são reiniciados, para que o usuário os vê voltendo fisicamente para seus padrões enquanto está desaparecendo. Então ele desaparece de volta assim que terminar de desaparecer. Fechar, mas não quero que o usuário veja os campos sendo redefinidos. Eu tentei o seguinte para esperar até o Fadeout concluído para redefinir os campos, mas eu recebi um loop infinito ou algo assim (o navegador disse que o roteiro estava correndo devagar e me perguntou se eu queria parar):

function Reset() {

    $formDiv.fadeOut(function() {

        while (!$(this).is(':animated')) {
            // perform reset actions here
        }

        $(this).fadeIn()
    });
}

Portanto, não tenho muita certeza de onde ir daqui. Qualquer ajuda seria apreciada. Obrigado.

Answer 1

Eu tive o mesmo problema ultimamente com fadeOut Isso parece estar funcionando incorretamente, e eu encontrei a solução para isso:

$(this).animate({opacity:'0'},function(){

   //here changes to this element

   $(this).animate({opacity:'1'});
})

Parece o mesmo que Fadein/Fadeout, mas funciona como é esperado (as alterações são feitas enquanto o elemento é invisível)

Espero que alguns de vocês achem útil.

Answer 2

Usar

jQuery.stop().fadeOut() 

Para evitar a fila da animação Fadeout.

.stop() can be used to prevent queueing any jQuery Animation 

http://api.jquery.com/stop/

Answer 3

O retorno de chamada realmente não deve disparar até que a animação tenha sido concluída. Você já tentou definir uma velocidade no Fadeout - a documentação (que nem sempre é precisa) mostra como um parâmetro necessário e pode ser se você especificar um retorno de chamada - ou seja, pode estar avaliando a função como a velocidade Se você não fornecer um explicitamente.

$formDiv.fadeOut('fast', function() {
    // perform reset
    $(this).fadeIn();
});

EDITAR: Depois de examinar o código, ele aparece (em 1.3.2, pelo menos) que, se você fornecer uma função como o primeiro argumento, ele o avaliará e usará o valor de retorno como velocidade. Se você especificar uma velocidade, sua função de retorno de chamada deve funcionar como você espera. O elemento deve desaparecer, o retorno de chamada disparará e sua redefinição e desaparecer no código será executada.

Answer 4

Investigar .atraso

Mais detalhes: defina a quantidade de tempo que a animação levará para o Fadeout () e use um atraso para a animação Fadein () que é mais longa que o tempo de animação do Fadeout. Neste exemplo, as ações de redefinição acontecerão durante a animação do Fadeout e, presumivelmente, não levarão mais de 600 ms.

$formDiv.fadeOut(600,function() {

    // perform reset actions here
    $(this).delay(650).fadeIn()
});

Editar: opa, entendeu mal o problema um pouco. Você deseja que a lógica do formulário de redefinição seja acionada na chamada Fadein (), não no Fadeout. Mas acho que ainda é bom sincronizar os eventos de animação. Tente algo como:

$formDiv.fadeOut(600,function() {
    $(this).delay(650).fadeIn(function() {
        // perform reset actions here
    });
});