Iniciando em Jquery – Parte IV

Até agora trabalhamos com efeitos simples, mudando estilos de elementos da tela, apenas (você pode ver os tutorias anteriores clicando aqui, aqui e aqui). Agora começaremos com coisas mais legais!

O jQuery permite uma série de efeitos bacanas, com o recurso de show  e hide, ou mostrar e esconder elementos na tela. Utilizando aquela mesma página HTML do tutorial anterior, vamos ver na prática como isso funciona.

Primeiramente crie dois botões, um para mostrar e um para esconder a lista que já foi criada. Não esqueça de usar ids diferentes, okay? Afinal cada botão chamará uma ação diferente. Assim seu código ficará mais ou menos assim:

E sua tela, ficará mais ou menos assim:

Bom, o resto você já sabe, não é? Vamos alterar o script – Dessa vez, não precisa excluir o efeito do hover, vamos apenas acrescentar novas partes. Edite o seu script de forma que fique como o abaixo:

[code language=”javascript”]

$(document).ready(function() {

$(‘#Lista_de_opcoes li’).hover(function()

{

$(this).addClass(“newstyle”);

},

function(){ $(this).removeClass(“newstyle”);});

$(“#bntEsconde”).click(function() {

$(“#Lista_de_opcoes”).hide(‘slow’);

});

$(“#bntMostra”).click(function() {

$(“#Lista_de_opcoes”).show(“fast”);

});

});
[/code]

Repare que depois de hide/show  especificamos a velocidade que será feito isso, podendo ser fast (rápida) ou slow (devagar). Teste os dois.

Agora você já sabe como criar um efeito bacana que muitos site itilizam por aí: Já viu essas divs que são minimizadas para dar mais espaço na tela? Pois é, você já sabe como cria-las!



// Comente!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

3 Comentários

// Siga as boas práticas: Comente!