Efeitos usando Jquery - Fadein - FadeOut

ARTIGO PUBLICADO POR Vítor Prado ORIGINALMENTE EM:
http://www.vitorprado.com/efeitos_usando_jquery_fadein_fadeout/

Saudações amigos, 1:05 da madruga, amanhâ, digo hoje, aula de processual civil (ân??) e eu aqui, começando a escrever este post.

Realmente não consigo parar de escrever, tem muita gente que precisa conhecer o poder da Jquery. Cê tem idéia da quantidade de gente que fica “inventado” gambiarras mirabolantes para conseguir um efeito em javascript?

Então, com a jquery fica tudo mais fácil, porque? Pelo simples fato de ser crossbrowser, seu código vai rodar em todos os browsers, isso, seu IE não vai travar; e depois, pela facilidade de se aplicar o efeitos.

Para começar esta série de posts (quantas séries, risos..) sobre efeitos javascript com jquery, falarei sobre o famoso FadeIn e FadeOut, já tão utilizados em aplicativos web 2.0!

Primeiro, precisaremos que você crie um arquivo em branco para testes já incluindo chamada para a Jquery.

Criou? Prontinho, agora cola isto:

Código javascript:

$(document).ready( function () {

$(”#botao_in_fast”).click ( function () {
$(”.minha_classe”).fadeIn(”fast”);
})
$(”#botao_in_normal”).click ( function () {
$(”.minha_classe”).fadeIn(”normal”);
})

$(”#botao_out_slow”).click ( function () {
$(”.minha_classe”).fadeOut(”slow”);
})
$(”#botao_out_time”).click ( function () {
$(”.minha_classe”).fadeOut(2000);
})

});
</script>

e isso:

Código css:

<style type=”text/css”>
.minha_classe {
width:300px;
height:200px;
background-color:#000000;
text-align:center;
color:#FFFFFF;
font-weight:bold;
}

</style>

e agora isso:

Código html:

<input name=”" type=”button” id=”botao_in_fast” value=”fadeIn(fast)”/>
<input name=”" type=”button” id=”botao_in_normal” value=”fadeIn(normal)”/>
<input name=”" type=”button” id=”botao_out_slow” value=”fadeOut(slow)”/>
<input name=”" type=”button” id=”botao_out_time” value=”fadeOut(time=2000)”/>
<div class=”minha_classe”>Este é o div alvo</div>

Depois de tudo isto copiado bem bonitinho em sua página, lembrando que o código javascript e css ficando dentro da tag <head></head>

Agora é só testar ( depois farei uma sala de testes online ta?)

Explicação? ( Precisa??)

ta , vamos lá:

O css e o html não precisa de comentários não é mesmo?

então vamos ao javascript .

$(document).ready-> Esta já é bem conhecida, executa logo que o DOM(código fonte) estiver carregado .

Já o método .click , é um (evento) que quando o alvo $(”#botao_in_fast”) for clicado, executará a funçã do fadein.

E quais os parâmetros do efeito Fadein e FadeOut?

Velocidade (String|número): (opicional) A string representa a velocidade definida do efeito (”slow“, “normal“, or “fast“) e o número os miléssimos de segundos para rodar toda a animação, ex(1000) - Um segundo.
Retorno (função): (opicional) A função que será executada após o efeito ser concluído.

E como usar o retorno?

Assim ó:

$(”.minha_classe”).fadeIn(”slow”,function(){
alert(”Animação concluída”);
});

Onde, o alert só seria executado após o efeito no div com a classe (minha_classe) tivesse sido concluído.

É isso aí, logo estarei trazendo mais efeitos interessantes.

Qualquer dúvida, sugestões, fofocas, broncas, bugs, desabafos, conselhos amorosos e tudo quanto achem que devo saber, manda um email ok??

Abraços e até a próxima..

1:38 ..risos…