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