Como executar o código no jQuery após a animação/efeito anterior (desconhecido) ter terminado?

Eu quero esconder um elemento DIV após os efeitos/movimentos anteriores terem sido concluídos. Se eu soubesse a sequência, eu poderia simplesmente adicionar código à função callback que eu dou para .animate() (por exemplo). No entanto, nesta situação, não tenho acesso a esse estado (pode ou não estar passando por uma animação/efeito). Assim, as duas animações/efeitos são acionadas por dois eventos diferentes (cliques de botão, por exemplo).

Então eu iria executar fadeOut após o elemento DIV ter terminado a animação/efeito atual. Isso é possível com jQuery?

Obrigado.

EDIT: Então o alvo é dissociar a ação atual (fadeOut() por exemplo) código do código de animação anterior.

EDIT2: fez a pergunta mais clara.

0
Por que você não tem acesso à sequência? Além disso, o que faz você dizer sua jQuery e não dizer, uma animação CSS3?
adicionado o autor Joey, fonte
@JoeyVanOmmen Eu sei que é jQuery porque eu escrevi :). A coisa é que a animação anterior é acionada a partir de evento diferente do próximo (por exemplo, dois cliques de botão separados).
adicionado o autor Lycha, fonte

5 Respostas

Apenas chame .fadeOut() e ele será automaticamente adicionado ao final da fila de fx:

http://jsfiddle.net/gilly3/f4vNH/

2
adicionado
Obrigado, eu não sabia que o jQuery pode fazer isso, isso resolve. Eu deveria ler mais sobre as filas de fx.
adicionado o autor Lycha, fonte
E, além disso, posso dar ao .fadeOut() um retorno de chamada para executar código adicional após o fadeOut.
adicionado o autor Lycha, fonte

Que tal criar um evento personalizado e vinculá-lo a live ()?

<script>
$("p").live("myCustomEvent", function(e, myName, myValue) {
  $('#div').hide();

});
$("button").click(function() {
  $("p").trigger("myCustomEvent");
});
</script>
0
adicionado

Você terá que nos mostrar o código de animação anterior para obter conselhos específicos. No jQuery, os efeitos de animação podem ser encadeados juntos e o jQuery irá enfileirá-los automaticamente um após o outro. Ou você pode usar a função de conclusão de uma operação para acionar o início da próxima operação.

Exemplos:

$("#item").fadeIn(1000).delay(1000).fadeOut(500);
$("#item").animate({
    opacity: 0.75,
    left: '+=250',
 }, 5000).delay(1000).fadeOut(500);

O método .animate() também tem uma função de conclusão que você pode usar para acionar qualquer operação quando a animação for concluída, mas se a próxima operação for uma animação, é mais fácil usar o encadeamento automático como acima, em vez da função de conclusão:

$("#item").animate({
    opacity: 0.75,
    left: '+=250',
 }, 5000, function() {alert("Animation finished."});
0
adicionado

Eu acho que você está procurando o parâmetro de função completo na chamada animada:

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

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
   //Animation complete.
  });
});
0
adicionado

Isso é simples, apenas enfileire sua animação

$("#myDiv").queue(function(){
    $(this).fadeOut();
});

Ele será executado após a conclusão da fila de animação. Então você pode adicionar código após a fila de animação e antes do seu fadeOut e fazer o que for ...

0
adicionado
JavaScript Brasil OFICIAL
JavaScript Brasil OFICIAL
4 138 dos participantes

Grupo sobre JavaScript do Brasil