Publicado em 31 de jul.

jQuery - Animate (Opacidade)

Eai pessoal, gostaria de aplicar o efeito de transparência em uma div sem utilizar imagem, então estou utilizando o jQuery para isso:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#teste").animate({ opacity: 0.5 }, 0 ); });
</script>

<style type="text/css">

body { background:#333; margin:20px; padding:0; } #teste { background:#FFF; padding:10px; } #teste span { display:block; }

</style>

<div id="teste">
<span>Testando</span>
<span>Testando</span>
<span>Testando</span>
<span>Testando</span>
<span>Testando</span>
</div>

No exemplo estou aplicando uma opacidade de 50% na div teste, mas o efeito é aplicado também em todos os elementos que estão dentro da div. Tem como limitar para que o efeito seja aplicado apenas no bloco da div ?

Obrigado!

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Thiago Retondar· 31 de jul.

Cara, nunca mexi com jQuery! Nunca mesmo! Estou aprendendo JavaScript ainda e tal, mas acho que é isso que você quer:

<script type="text/javascript" src="[http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">](http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js)
<script type="text/javascript">
$(document).ready(function() {
	$("#teste").animate({ opacity: 0.5 }, 0 );
	$("span").animate({ opacity: 1.0 }, 0 ); //Essa é a linha que faz o que você deseja.
});
</script>
 [http://forum.imasters.com.br/public/style_emoticons/](http://forum.imasters.com.br/public/style_emoticons/)default/thumbsup.gif

Deives· 31 de jul.

Eai Thiago, já tinha tentado dessa forma, mudando apenas 1.0 para 1 pois ele não aceita 1.0... mas acho que dessa forma não vale a pena, compensa colocar imagem...

vlw pela ajuda!

Se alguém souber de algum código, pois estou interessado em ver se é possivel... pesquisei na net e não encontrei nada mas vou pesquisar mais... rs http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Thiago Retondar· 31 de jul.

Uhhnn... Falha minha. Testei com a cor vermelha aqui e não funcionou, realmente. http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

Dei uma pesquisada aqui, mas não achei nada não.

Vamos esperar alguém.

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

XauDH· 1 de ago.

Pra animar com o pacidade no jQuery tenta usar fadeTo(velocidade, opacidade)

No seu caso:

<script type="text/javascript">
$(document).ready(function() {
 $("#teste").fadeTo(0, 0.5);
});
</script>

Deives· 1 de ago.

Eai! valeu pela dica, mas a opacidade se aplica também a todos os elementos dentro da div...

am designer· 15 de out.

Ola cara.

Então, você pode tentar definir um id para cada span.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#teste #teste1").animate({ opacity: 0.5 }, 0 ); });
</script>

<style type="text/css">

body { background:#333; margin:20px; padding:0; } #teste { background:#FFF; padding:10px; } #teste span { display:block; }

</style>

<div id="teste">
<span id='teste1'>Testando</span>
<span id='teste2'>Testando</span>
<span id='teste2'>Testando</span>
<span id='teste3'>Testando</span>
<span id='teste4'>Testando</span>
</div>