Ir para conteúdo

POWERED BY:

Arquivado

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

guih_oliveira10

[Resolvido] efeito de descer suavemente javascript

Por , em Javascript

Recommended Posts

guih_oliveira10    1

guih_oliveira10
Postado

gente gostaria de saber como se faz aqueles efeitos e javascript que você clica num lugar e a imagem ou div aparece aos poucos dando um efeito legal

 

um exemplo é aqui neste forum mesmo quando você clica la emcima no seu nome de usuario e aparece aquelas opções da um efeito legal ao aparecer.

 

outro exemplo e na pagina inicial deste site sem ser na sessao de foruns quando você nao ta logado e clica em entrar e aparece o formulario de login com um efeito massa.

 

como fazer isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Use jQuery

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif jQuery

 

Depois de incluir na página o arquivo 'jquery-1.3.2.js', faça assim:

 

$(document).ready(function(){
	$('#botao).click(function(){
 	$('#elemento').slideDown('slow');
	});
});

No HTML:

<a id="botao" href="#">Clique</a>
<div id="elemento">Conteudo</div>

Para visualizar melhor, adicione mais conteúdo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

guih_oliveira10    1

guih_oliveira10
Postado

coloquei assim mas nao funfou:

 

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
        $('#botao').click(function(){
        $('#elemento').slideDown('slow');
        });
});
</script>
<body>
<a id="botao" href="#">Clique</a>
<div id="elemento">Conteudo</div>
</body>
</html>

nao estendi a parte "Depois de incluir na página o arquivo 'jquery-1.3.2.js':"

 

como se faz?

 

 

de qualquer forma muito obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Teste</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('#botao').click(function(){

$('#elemento').slideDown('slow');

});

});

</script>

</head>

<body>

<a id="botao" href="#">Clique</a>

<div id="elemento">Conteudo</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

guih_oliveira10    1

guih_oliveira10
Postado

valeu gente agora funcionou

 

o meu codigo final ficou assim:

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $('#botao').click(function(){
        $('#elemento').slideDown('slow')
		elemento.style.display="block";
        });
});
</script>
</head>
<body>
<a id="botao" href="#">Clique</a>
<div id="elemento" style="display:none">
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
</div>
</body>
</html>

 

coloquei o conteudo invisivel e quando a pessoa clica ele aparece com o efeito legal

 

valeu galera

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