Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

jQuery: effetto dissolvenza sui link.

Scritto da Fare-internet il 21 ottobre 2010 condividi condividi


In questo breve articolo vogliamo trattare la dissolvenza nel passaggio tra un pagina web e l’altra dopo aver cliccato un link.

Ottenere questo effetto con jQuery è veramente semplice, è bastata solo un po’ di inventiva.
Una demo del risultato ottenuto è visibile a questo indirizzo:
http://demo.studio-88.it/fadeLink/


Il codice necessario è il seguente:

$(document).ready(function(){
        $(‘a’).click(function(){
                $(‘body’).fadeOut(‘slow’);
                $pag = $(this).attr(‘href’);
                $(‘body’).fadeOut(‘slow’);
                setTimeout(‘goLink("’+$pag+‘")’,800);
                return false;
        });
})

function goLink($pag){
        location.href = $pag;   
}

Sui link non c’è bisogno di aggingere nulla, va notato che questo codice applica l’effetto a tutti i link e non tiene in considerazione un’evenutale target.
In ogni caso questi miglioramenti sono semplici fa ottenere.
Se volessimo che l’effetto avvenisse solo su i link con classe “effect“, basterebbe scrivere:

<a href="http://www.fare-internte.com" class="effect">Link con disolvenza</a>

e modificare il javascript scrivendo:

$(document).ready(function(){
        $(‘a.effect’).click(function(){
        //… il resto tutto uguale

Twitter