sábado, 11 de fevereiro de 2012

Efeito entre paginas


Problema:
Você tá lá fazendo sua pag. e pensa em botar um efeito em jQuery na pag para quando o usuário clicar em um link ele dar um fade no body e depois levar o usuário para a outra pag.

$(document).ready(function(){
$("a").click(function(e){
   e.preventDefault();
   var link = $(this).attr("href");
   $("body").fadeOut(1000,function(){
        window.location = url;
   });
})
});

Como diria nosso amigo Jack "Ô Estripador": Vamos por partes mwahahaha...
Linha 1: O argumento passado para a nossa função anônima (e) recebe o evento do click sobre o link.


Problema:
Mas peraí, se quando o carinha lá clickar no link ele não será direcionado automaticamente para a outra pag. sem q ele veja o lindo efeito?

Solução: Agora vem a manha
Linha 3: o método preventDefault() que o evento perca sua funcionalidade original, ou seja, que o browser leve o nosso amado usuário automaticamente para a outra pag.


Linha 4: Armazenando o endereço do link

a var url = $(this).href("href") deve explicar-se por si só, ela armazena o valor do atributo href do link em questão.



Linha 5:
Nosso tão falado e desejado efeito, que estará futuramente a seu critério. Assim sendo, após 1s de pura emoção do nosso usuário e ao fim da animação o jQuery chamará o callback da função que executará a
Linha 6:
window.location é a variável quem armazena o endereço da janela atual, alterando agora o valor da mesma para o valor da variável url levará o usuário para a outra pag.
Fim

Nenhum comentário:

Postar um comentário

~le comentário