jQuery é amplamente conhecido no seio dos desenvolvedores web e como muitos sabem é bastante útil. Um dos pontos fortes de jQuery é a possibilidade de se adicionar efeitos “especiais” nas páginas web sem grandes problemas. Estes efeitos passam por exemplo por mostrar e ocultar partes da página sejam elas texto ou imagens. jQuery é considerado como uma das melhores bibliotecas Javascript existentes no mercado das linguagens de programação, permitindo aos desenvolvedores criar verdadeiras obras de arte para quem visita as suas páginas. A introdução de efeitos nas páginas pode levar ao melhoramento da experiência de navegação do usuário, fazendo muitas das vezes com que este goste do que vê e volte mais tarde. A fidelização dos visitantes é um aspecto muito importante, e com jQuery você pode dar um passo em frente nesse campo. Para o ajudar a melhorar as suas páginas web utilizando jQuery trazemos-lhe neste artigo alguns 6 Efeitos jQuery para introduzir em seus websites!
Não perca os artigos anteriores relacionados com jQuery e Javascript:
- Tutorial jQuery: o que é e como usar o jQuery!
- Plugin jQuery para criação de Templates
- 15 Efeitos jQuery Fantásticos e Gratuitos
- Javascript para desenvolvedores PHP
- Javascript Explicado – Abordagem Básica
- Javascript Explicado – Abordagem Avançada
1. ANTES DE COMEÇAR – PARTE I
Antes de começar avalie os seus conhecimentos: Se sabe o que é jQuery e como utilizar, passe para o ponto 3. Se não sabe, não há problema! A Escola Criatividade tem um fantástico tutorial de jQuery que poderá ler para aprender e começar já a utilizar jQuery, visite-o em Tutorial jQuery: o que é e como usar o jQuery!
2. ANTES DE COMEÇAR – PARTE II
Nunca é demais lembrar e relembrar que é necessário fazer a chamada à biblioteca jQuery para que os efeitos funcionem. Caso não o faça, esperam-no muitas horas de frustração tentando fazer com que os efeitos funcionem. A versão mais recente é a 1.6.4 que poderá ser baixada aqui. Lembre-se que dentro da tag <head> terá de colocar a chamada ao ficheiro. Se o ficheiro jQuery estiver na mesma pasta que o ficheiro HTML, basta colocar o seguinte código:
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
3. EFEITO SHOW
O efeito show como o nome indica passa por mostrar algo. Pode definir na sua página que um objecto por defeito está escondido, e adicionando o efeito Show dá a possibilidade ao visitante de ter acesso ao conteúdo escondido. Para introduzir o efeito show basta utilizar o seguinte trecho de código:
$("#conteudo").show(2000);
Naturalmente, este trecho de código não funcionará sozinho, são necessários outros elementos, aqui fica o conjunto completo:
$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#conteudo").show(2000);
});
});
Este é o código que irá gerir a acção SHOW que irá decorrer durante 2 segundos, conforme estipulado em “.show(2000);”. Este valor pode ser alterado de acordo com a sua preferência ou necessidade!
4. EFEITO HIDE
A utilização do efeito Hide é bastante semelhante ao efeito show em que pode definir na sua página que um objecto por defeito está á vista, e adicionando o efeito Hide dá a possibilidade ao visitante de esconder o conteúdo visível. Para introduzir o efeito Hide basta utilizar o seguinte trecho de código:
$("#conteudo").hide("slow");
À semelhança do Show, este trecho de código não está sozinho, aqui fica o conjunto completo:
$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#conteudo").hide("slow");
});
});
Este é o código que irá gerir a acção HIDE que irá decorrer lentamente, conforme estipulado em “.hide(“slow”);”. Este argumento pode também ser alterado por exemplo para “fast”. Experimente!
5. EFEITO SLIDEDOWN
A utilização do efeito Slide Down é bastante semelhante aos demais, mas neste caso o conteúdo irá deslizar para baixo. Para introduzir o efeito Slide Down basta utilizar o seguinte trecho de código:
$("#conteudo").slideDown(1500);
O conjunto completo:
$(document).ready(function(){
$("#deslizar_baixo").click(function(event){
event.preventDefault();
$("#conteudo").slideDown(1500);
});
});
Este é o código que irá gerir a acção SlideDown que irá decorrer de acordo com o tempo estipulado em “.slideDown(1500);”. Este argumento pode também ser alterado de acordo com a sua preferência. Experimente!
6. EFEITO SLIDEUP
A utilização do efeito Slide Up é bastante semelhante aos demais, mas neste caso o conteúdo irá deslizar para baixo. Para introduzir o efeito Slide Up basta utilizar o seguinte trecho de código:
$("#conteudo").slideUp("fast");
O conjunto completo:
$(document).ready(function(){
$("#deslizar_cima").click(function(event){
event.preventDefault();
$("#conteudo").slideUp("fast");
});
});
Este é o código que irá gerir a acção SlideDown que irá decorrer de acordo com o tempo estipulado em “.slideUp(“fast”);”. Este argumento pode também ser alterado de acordo com a sua preferência. Experimente!
7. EFEITO FADEIN
A utilização do efeito Fade In é bastante semelhante aos demais, mas neste caso o conteúdo aparecer com um efeito de transparência. Para introduzir o efeito Fade In basta utilizar o seguinte trecho de código:
$("#conteudo").fadeIn("fast");
O conjunto completo:
$(document).ready(function(){
$("#aparecer").click(function(event){
event.preventDefault();
$("#conteudo").fadeIn("fast");
});
});
Este é o código que irá gerir a acção FadeIn que irá decorrer de acordo com o tempo estipulado em “.fadeIn(“fast”);”. Este argumento pode também ser alterado de acordo com a sua preferência. Experimente!
8. EFEITO FADEOUT
A utilização do efeito Fade In é bastante semelhante aos demais, mas neste caso o conteúdo aparecer com um efeito de transparência. Para introduzir o efeito Fade In basta utilizar o seguinte trecho de código:
$("#conteudo").fadeOut("fast");
O conjunto completo:
$(document).ready(function(){
$("#aparecer").click(function(event){
event.preventDefault();
$("#conteudo").fadeOut("fast");
});
});
Este é o código que irá gerir a acção FadeIn que irá decorrer de acordo com o tempo estipulado em “.fadeIn(“fast”);”. Este argumento pode também ser alterado de acordo com a sua preferência. Experimente!
CÓDIGO FONTE
Se tiver interesse em descobrir como está o código fonte final utilizando os 6 Efeitos que lhe trouxemos neste artigo, pode baixá-lo aqui.
TEM ALGUMA SUGESTÃO?
Gostamos de contar com a opinião e sugestões dos nossos leitores. Se tem alguma sugestão ou opinião não perca mais tempo, comente o artigo!
Abraço e até já!
Jose Correia
Olá Diogo Espinha.
Sou novo leitor do seu blog e acho o muito bom.
Vim aqui perguntar se por acaso voce sabe de algum tutorial para aprender php sem ser o manual do php e em português.
Espero a tua resposta
Diogo Espinha
Olá Jose Correia, uma rápida pesquisa por “php” irá devolver alguns artigos sobre PHP presentes na Escola Criatividade.
Abraço!
Jose Correia
Desculpa mas esquecime de perguntar uma coisa.
Sei que nao es da escola wp mas sabes como colocar artigos relacionados com algum plugin ou codigo php?
Diogo Espinha
O melhor local para expôr essa questão é mesmo na Escola WordPress – http://www.escolawp.com
Abraço!
Jose Correia
obrigado paulo
Jose Correia
desculpe obrigado diogo
Jose Correia
Mas onde se coloca estes codigos?
Em que contexto?
Digital Side
Faltou exibir a aplicação dos códigos acima em exemplos reais, aonde é possível ver os efeitos em ação.
Grande abraço!
Diogo Espinha
Olá Digital Side, no código fonte que está disponibilizado no final do artigo tem os vários efeitos introduzidos numa página HTML, na qual poderá ver os efeitos em acção. Pode baixar o código fonte aqui.
Abraço!
Josué
Parabéns pelo site. Muito conteúdo interessante e bem explicado.
Olhando o código do exemplo, ví que o elemento hgroup foi colocado dentro do head. Isto é semanticamente permitido?