Transición fade entre páginas con jQuery

Jorge Maiden — Sat, 13 Mar 2010 12:10:24 +0000

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>

Bufa Webmaster » difuminado

Transición fade entre páginas con jQuery