Ir para conteúdo

POWERED BY:

Arquivado

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

Leandro Vieira Pinho

Efeito de transição com js

Por , em Javascript

Recommended Posts

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

Tenho uma div com 100px e um link que chama um script para aumentar o tamanho para 600px, gostaria que à alteração do tamanho não fosse brusca, mas ocorresse em um determinado tempo tipo 10s.Ou seja, durante estes 10s a div estaria "crescendo".Aumentar eu sei, agora como incrementar este recurso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mário Monteiro    179

Mário Monteiro
Postado

cria um função pra issoe vai aumentando com um delay basico (settimeout)

Compartilhar este post

Link para o post
Compartilhar em outros sites

renanfog    0

renanfog
Postado

E ai, camarada

fiz um exemplo bem bobinho pra você ver como funciona

mas fiz de qualquer jeito, da pra melhorar, é só pra você entender..

falou!!

 

<html><head></head><script type="text/javascript">	var timer;	function aumentaDiv(){  // Inicia o timer com o parametro 100  timer = setTimeout("step(100)",50);	}	function step(_size){  // recupera DIV  elem = document.getElementById("bloco");  // incrementa a largura em 20px  elem.style.width = _size + 20;  if (elem.offsetWidth != 600){ 	 // se não alcançou 600, atualiza o timer com o tamanho + 20 	 timer = setTimeout("step(" + (_size + 20) + ")", 50)  }else{ 	 // limpa o timer quando alcança tamanho maximo 	 clearTimeout(timer);  }	}</script><body><div id="bloco" style="position:absolute;top:30px;left:20px;width:100px;height:100px;display:block;background-color:#666666;">div</div><br><br><br><br><br><br><br><br><br><br><a href="javascript:aumentaDiv();">Crescer...</a></body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

renanfog    0

renanfog
Postado

O que delimita a velocidade é o segundo parametro do setTimeout.....

 

setTimeout("step(" + (_size + 20) + ")", 50)

Eu usei 50... mas lembre-se que 1000 é um segundo!!

 

falou carinha

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