Publicado em 16 de dez.

[Resolvido] efeito de descer suavemente javascript

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?

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Henrique Barcelos· 16 de dez.

Use jQuery

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

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...

guih_oliveira10· 16 de dez.

coloquei assim mas nao funfou:

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<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

Daniel-DF· 16 de dez.

<html xmlns="[http://www.w3.org/1999/xhtml">](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">](http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js)

<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>

guih_oliveira10· 16 de dez.

valeu gente agora funcionou

o meu codigo final ficou assim:

<html xmlns="[http://www.w3.org/1999/xhtml">](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">](http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js)
<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