Guanabara.info: Podcast, Tecnologia, iPhone, Notícias, Tutoriais, Vídeo Aulas, Programação

Bom estamos aqui com o segundo artigo da série jQuery, onde vamos fazer algo muito útil com pouca quantidade de código.

Últimos Artigos:

1. Aprendendo a importar o Framework do Google

Nos primeiros artigos é de suma importância que todos comecem a aprender um pouco de como funciona os Eventos, os efeitos e os manipuladores. Mais para frente você irá perceber o quão importante foi ver esses 3 tipos de elementos antes de começar a realmente fazer algo útil.

Seguiremos a idéia do artigo passado onde importamos o jQuery direto do Google.com para que o tempo de carregamento fosse o mínimo possível.

Neste artigo irei falar sobre como começar a fazer usar um Evento que irá chamar um efeito de transparência (fade).

Comecemos criando nosso XHTML, que deve conter o seguinte dentro de seu corpo[body]:

	<div id="abrir" class="botao">Fazer o Fade</div>
	<div id="texto" class="texto">Div com FadeIn e Out</div>

Tenham como prática usar sempre o atributo id para fazer a identificação de qual elemento da página será modificado, pois a classe [class] poderá se modificada.

Após feito o XHTML iremos usar o seguinte CSS para poder fazer o estilo da página:

div.texto { width:250px;background: #e1e1e1; border:1px solid #333;padding:10px; margin-top:10px;}
div.botao { text-align:center; line-height:30px; width:105px; padding: 0 10px; background: #e1e1e1; border:1px solid #333; cursor:pointer; }

Só para que vocês entendam, quando uso o ponto antes de texto e botao, estou definindo que o estilo será aplicado em uma classe[class], caso fosse um id seria um jogo da velha[#].

Agora iremos para a parte do jQuery, nesse artigo iremos usar o seguinte código:

$("#abrir").toggle(
	function() {$("#texto").fadeTo(1000, 0.1);},
	function() {$("#texto").fadeTo(1000, 1.0);}
);

Lembre-se de onde deve ser colocado o código jQuery [Artigo 1].

Vamos entender o que irá acontecer nesse código, primeiramente em jQuery é importante começar sempre com um cifrão[$], este deve mostrar ao framework que estamos começando a atribuir algo para o elemento que deve e ser identificado logo a seguir [("elemento")].

No caso o elemento de id abrir vai fazer loop entre as funções que são colocadas abaixo.

Temos duas funções que iremos ativar assim que o usuário clicar no elemento #abrir, se for clicado uma vez a primeira função[function(){}] será ativada, no segundo clique a segunda função será ativada, e dessa forma funciona o evento toggle.

Dentro do evento[toggle] temos a função que irá ativar no elemento #texto o efeito fadeTo(1000, 0.1);, que irá fazer com que #texto mude de opacidade até chegar em 10%[0.1] da opacidade total em um tempo de 1000 milisegundos[1000], ou 1 segundo.

Logo a função abaixo[fadeTo(1000, 1.0);] irá fazer com que o elemento #texto mude sua opacidade em 1 segundo para 100% de sua opacidade original.

Lembre-se que todas as funções e códigos do jQuery são CaseSensitive, ou seja faz diferença usar fadeTo e fadeto.

Após feito tudo isso e entendido como funciona, salve o seu arquivo .html e veja o resultado, ou acesse a página para ver o resultado.

Os comentários do artigo servem não só para críticas, mas também para perguntar sobre algo que não compreendeu, ou seja não se acanhem!