jQuery - Animate (Opacidade)

[Deives 0]

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!

[Thiago Retondar 18]

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"></script>
<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/default/thumbsup.gif

[Deives 0]

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

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

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

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

[am designer 7]

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>