atrasar efeitos JQuery

Eu quero fade out um elemento e todos os seus elementos filho após um atraso de alguns segundos. mas eu não encontrei uma maneira de especificar que um efeito deve começar após um atraso de tempo especificado.

setTimeout(function() { $('#foo').fadeOut(); }, 5000); 

O 5000 é cinco segundos em milissegundos.

Eu uso este plugin de pausa que acabei de escrever

 $.fn.pause = function(duration) { $(this).animate({ dummy: 1 }, duration); return this; }; 

Chame assim:

 $("#mainImage").pause(5000).fadeOut(); 

Nota: você não precisa de um retorno de chamada.


Edit: Agora você deve usar o jQuery 1.4. construído no método delay () . Eu não chequei, mas eu suponho que é mais “inteligente” do que o meu plugin.

Anteriormente você faria algo assim

 $('#foo').animate({opacity: 1},1000).fadeOut('slow'); 

O primeiro animate não está fazendo nada desde que você já tem a opacidade 1 no elemento, mas faria uma pausa por quanto tempo.

No jQuery 1.4, eles criaram isso no framework para que você não precise usar o hack como acima.

 $('#foo').delay(1000).fadeOut('slow'); 

A funcionalidade é a mesma que o plugin original do jQuery.delay() http://www.evanbot.com/article/jquery-delay-plugin/4

A melhor maneira é usando o método de atraso jQuery:

$ (‘# my_id’). delay (2000). fadeOut (2000);

Você pode evitar o uso de setTimeout usando o método fadeTo () e definindo um atraso de 5 segundos.

 $("#hideAfterFiveSeconds").click(function(){ $(this).fadeTo(5000,1,function(){ $(this).fadeOut("slow"); }); }); 

Eu escrevi um plugin para deixar você adicionar um atraso na cadeia.

por exemplo $ (‘# div’). fadeOut (). delay (5000) .fadeIn (); // fade element out, aguarde 5 segundos, fade element back in.

Ele não usa nenhum movimento de animação ou encadeamento de retorno de chamada excessivo, apenas código curto simples e limpo.

http://blindsignals.com/index.php/2009/07/jquery-delay/

Intereting Posts