Como aplicar o efeito FadeIn e FadeOut com jQuery

Veja um exemplo de como deverá ficar sua página se tudo correr bem.

Por questão de ordem, gosto, vamos trabalhar com 3 arquivos: jquery.js, sistema.js e teste.html.

Jquery.js – É o framework, você pode baixar na página oficial do jQuery.

sistema.js – Código javascript que diz o que deve ser feito.

teste.html – É a página html.

No arquivo HTML (teste.html) você vai chamar os dois “js”, criar 2 input do tipo button e atribui uma ID para cada um deles, criar uma DIV com uma classe e incluir uma imagem, a seu gosto, dentro desta DIV. Seu código deverá ficar mais ou menos assim:

Dentro da tag HEAD do arquivo HTML você vai chamar os JS assim:

1
2

<script src="jquery.js" type="text/javascript"></script>
<script src="sistema.js" type="text/javascript"></script>

1
2
3
4

<input type='button' id='fade_out' value='Sumir' />
<input type='button' id='fade_in' value='Aparecer' />
<br /><br />
<div class='foto'><img src='ENDEREÇO_DA_FOTO' /></div>

No arquivo do JavaScript vamos criar as funções responsáveis pela manipulação dos objetos HTML gerando os efeitos, escreve em sistema.js assim:

1
2
3
4
5
6
7
8

$(document).ready( function () {
$("#fade_out").click ( function () {
$(".foto").fadeOut(2000);
})
$("#fade_in").click ( function () {
$(".foto").fadeIn(2000);
})
});

Antes de ver os comentários do código, que segue abaixo, quero que abra o arquivo teste.html no seu navegador predileto (é carinha, com jquery não tem problema de ler em um browser e outro não) e teste o efeito.

A mágica acontece nessas 8 linhas do arquivo sistema.js, os jquery.js já vem pronto e você nã precisa alterar nada e o teste.html é bem básico, qualquer um com o mínimo conhecimento de HTML vai entender, sendo assim vou comentar apenas o sistema.js.

Linha 1 – Iniciamos quando fonte estiver carregado.
Linhas 2 e 3 – Quando o objeto com a ID fade_out receber um click executa a função que da o efeito fadeout no objeto cuja classe é “foto”. O parametro “2000″ indica a velocidade, em milesegundos, do efeito.
Linha 4 Fecha.
Linhas 5 e 6 Quando o objeto com a ID fade_in receber um click executa a função que da o efeito fadein no objeto cuja classe é “foto”.
Linhas 7 e 8 Fecha.

Simples não é? Veja um exemplo do efeito aqui, claro que dei uma estilizada com CSS pra ficar mais bonitinho…

This entry was posted on sexta-feira, fevereiro 6th, 2009 at 4:44 pm and is filed under Desenvolvimento WEB, dicas. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.