Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Sander Luís

[Resolvido] executar javascripts em ordem e tempo definido

Por , em Javascript

Recommended Posts

Sander Luís    4

Sander Luís
Postado

estou com uma grande duvida pelo menos para mim

 

primeiramente eu quero colocar no onload do body algo parecido com isso:

 

<body onload="javascript:executarefeitos()"

 

onde a função executa efeitos executaria os efeitos em hordem e no tempo correto

 

tipo assim:


function executarefeitos()
{
new Effect.Puff('puff_demo1'); return false;
//depois de 1 segundo executa todos esses junto:
new Effect.Puff('puff_demo2'); return false;
new Effect.Puff('puff_demo3'); return false;
new Effect.Puff('puff_demo4'); return false;
//depois de mais 2 segundos:
new Effect.Puff('puff_demo5'); return false;
//e assim por adiante......
}

e assim vai......

 

 

os efeitos são da livraria do script.aculo.us

 

e oque eu peguei de exemplo foi o efeito puff ele faz desaparecer a div como se fose um estouro.... vejam la se tiverem interesse

logico q é um exemplo...

 

ja se for usar setTimeout como q faço para ficar como eu pedi um depois do outro e depois varios juntos etc? tem como?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sander Luís    4

Sander Luís
Postado

ja vi q colocar essas funções no body onload da uma poluída na pagina então acho q vou por assim:

<script>
jQuery(window).load(function($){
   // código
});
</script>

 

ali no lugar do codigo como q faço para executar oq eu pedi? um efeito depois do outro?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

não vejo nenhuma outra alternativa, se não saber exatamente qnto tempo vai durar o efeito anterior, e atrazar o próximo com o setTimeout()

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sander Luís    4

Sander Luís
Postado

não vejo nenhuma outra alternativa, se não saber exatamente qnto tempo vai durar o efeito anterior, e atrazar o próximo com o setTimeout()

 

ja se for fazer assim:

 

<script>

jQuery(window).load(function($){

// código

});

</script>

 

como q faz para por o setTimeout() ae? vlw

 

pq seria algo como new Effect.Puff('puff_demo'); return false; depois o setTimeout() e depois outro new Effect.Puff('puff_demo2'); return false;

 

dae eu não sei como q posiciona dentro do codigo, se deve ser dentro de {} ou tem q criar uma function teste(){e por o new Effect.Puff('puff_demo'); return false; aki}

 

dah uma ajudinha ae vlwww

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 
<script>
jQuery(window).load(function($){
   efeito1();//dura 2 segundos


   //esse proximo dura 4 segundos
   window.setTimeout(function(){
      //efeito2() 
   },2000);


   window.setTimeout(function(){
      //efeito3()
   },6000);
});
</script>

entendeu ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sander Luís    4

Sander Luís
Postado

sou novo aki, aonde q troco o titulo do post para [resolvido] ??/

 

consegui, usando os efeitos do script.aculo.us

 

fiz assim (apenas teste, foi feito apenas para navegadores q aceitam -webkit-, depois vou utilizar imagens e não css3 dae qualquer um pode ver )

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Teste </title>
<script type="text/javascript" src="http://script.aculo.us/prototype.js"></script>
<script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"></script>
<style type="text/css">
.circles {width:100px; height:100px; background:#ccc;margin-right:50px;float:left;border-radius: 50px;background: -webkit-gradient(radial, 50% 50%, 1, 50% 50%, 60, from(springGreen), to(#555)) repeat-X;}
.circles:hover {background: -webkit-gradient(radial, 50% 50%, 1, 50% 50%, 60, from(yellowGreen), to(#555)) repeat-X;}
#box {height:100px; width:450px;margin-top:50px}
</style>
</head>

<body>
<center>
<div id="box">
<div id="circle1" class="circles" style="display:none;" ></div>
<div id="circle2" class="circles" style="display:none;"></div>
<div id="circle3" class="circles" style="display:none;"></div></div>
</center>
<script type="text/javascript">
function fadein1(){Effect.Grow('circle1',{ duration: 0.8 });}
function fadein2(){Effect.Grow('circle2',{ duration: 0.8 });}
function fadein3(){Effect.Grow('circle3',{ duration: 0.8 });}
fadein1();
setTimeout('fadein2()', 200);
setTimeout('fadein3()', 400);
</script>
</body>
</html>

{agora validei ele para o w3c kkk só tem um warning como q tira aquilo????? kkkk sei q é apenas uma dica mas seria melhor q ela não existisse uhsauahsuahs}

 

teste ae ficou muito massa, vou fazer esse efeito em umas divs q passa o mouse e troca de foto com efeito fade e tals e com link. estará em meu novo site q será lançado no começo do mes q vem será www.sandersites.com.br

 

 

vlw ae mas consegui sozinho e olha q sei apenas o basico de javascript php etc.... vlw ae William Bruno......

 

olhem com q ficou como eu queria: http://sandersites.alphimedia.com/linksdemo/

 

por favor olhem só isso e não o site pq tah em construção e o tema q tem la não sera o q eu vou usar kkkkkkkkkk

 

só uma coisa, na primeira vez q carrega a pagina ele não executa os efeitos, ja nas outras vezes executa normal......

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sander Luís    4

Sander Luís
Postado

outra coisa, alguem ae sabe como q faz o efeito fade quando coloca o mouse em cima dos <a> tipo assim: http://sandersites.alphimedia.com/linksdemo/back/ ? era para ocorrer com o script q eu tinha colocado mas dae não deu certo e eu tirei deixei o :hover do css normal se algume sabe dah uma dica ae vlwwwww

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sander Luís    4

Sander Luís
Postado

não sei muito de javascript como q coloco o efeito fade ali?

 

tipo você viu o q eu ja fiz, é simplesmete a mesma coisa q esta lá só q demora um pouco para trocar o background do <a>, isso seria um efeito de transição, igual aki http://sandersites.alphimedia.com/linksdemo/back/, alguma dica vlw?

quem me ajudar ae com essas duvidas depois vou colocar baner de parceria no meu site será www.sandersites.com.br

 

baner com destaque na home

 

vlwwww

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sander Luís    4

Sander Luís
Postado

Estou confuso, esses links que você está colocando não são as páginas que você tá mexendo?

 

Se for, já está com o .hover(). Você quer acelerar a transição?

 

sim o ultomo link é um que eu baixei e ia implementar o efeito o link 1 q eu fiz do 0, oque eu vou fazer agora é isso

 

em vez de criar no meu css isso #divid:hover{blablabla} #divid{blablabla}

 

vou criar duas divs, uma dentro da outra, a q fica em cima q tem as cores etc do efeito hover está com opacidade 0; dae quando eu coloco o mouse em cima da div de baixo q tem a cor preto e banco etc aplica o efeito de fade na de sim então ela vai aparecendo aos pocos em cima da outra, e quando tirou o mouse ela volta gradativamente para a opacidade 0, é o meso cistema do exemplo dois q eu dei o link só q lá faz isso em um span e aki eu vou fazer direto na div,

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sander Sites - Teste</title>
<script type="text/javascript" src="http://script.aculo.us/prototype.js"></script>
<script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"></script>
</head>

<body>
<style>
#opacity_demo {width: 100px; height: 100px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(204, 204, 204); }
#opacity_demo_hover {width: 100px; height: 100px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(0, 0, 0); opacity: 0; }
#opacity_demo_hover:hover {opacity: 100;}
</style>

<div id="opacity_demo" onmouseover="new Effect.Opacity('opacity_demo_hover', { from: 0, to: 1,duration: 0.5 });">
<div id="opacity_demo_hover" onmouseout="new Effect.Opacity('opacity_demo_hover', { from: 1, to: 0,duration: 0.5 });" ></div></div>
</body>
</html>

 

olhado aki tive q colocar igual o :hover da segunda div para ele não desaparecer por causa do opacity 0

 

mas ficou normal depois altero no css o background color para uma imagem, depois posto o link de como q ficou corretamente funcionando

 

huuhhhuul funcionou perfeitooooo

 

Vejam aki

 

http://sandersites.alphimedia.com/linksfuncionando/

 

tbm vou por uma mensagem bem grande na tela efeito lightbox caso o usuario teja com o javascript desabilitado

 

 

d+++++++++++++++++++ vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sander Luís    4

Sander Luís
Postado

consegui perfeito, coloquei a entrada como eu tinha falado e tbm o efeito fade nas divs, coloquei link direto nas divs usando onclick="window.location='#'" e tbm fiz a caixa de alerta para o visitante caso tenha o javascript desativado, usando <noscript>div do alerta </noscript> estem ae desativando o javascript

 

link:

 

http://sandersites.alphimedia.com/linksfuncionando/

 

espero q esse post ajude quem tbm preciza saber sobre o setTimeout()

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito