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:

Link con disolvenza

e modificare il javascript scrivendo:

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