Transición fade entre páginas con jQuery

Para los que quieran un efecto de suavizado o difuminado al abrir y cerrar páginas web de vuestro sitio vamos a crear este efecto utilizando jQuery. Utilizando esta técnica obtendremos un estilo más elegante en las transiciones entre páginas de nuestro sitio web.

$(document).ready(function() {
	
    $("body").css("display", "none");
    $("body").fadeIn(2000);
    
	$("a.transicion").click(function(event){
		event.preventDefault();
		linkDestino = this.href;
		$("body").fadeOut(1000, redireccionarPag);		
	});
		
	function redireccionarPag() {
		window.location = linkDestino;
	}
	
});

<p>Ejemplo de uso: <a href="nuevapagina.html" class="transicion">abrir nueva página</a>.</p>