Transición fade entre páginas con jQuery
13 mar 2010 6 comentarios
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;
}
});
$("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;
}
});
Mi nombre es Jorge, y soy de León. Desde hace algo más de 6 años trabajo de desarrollador web en las disciplinas de diseño, programación y SEO.
6 Comentarios
David, el 13/12/2010 a las 17:18:09
excelente. muchas gracias.
Por lo menos a mi me funciona sin aplicar la class en cada link.
Cristina, el 23/02/2011 a las 17:28:12
Muy elegante y fácil de implementar. Mil gracias
Felipe, el 28/02/2011 a las 22:49:10
No todos los que llegamos acá somos programdores…
cabe destacar que hay que poner esto en el head
asi como encerrar el codigo en la etiqueta script
viduvidu, el 23/04/2011 a las 02:43:03
Felipe tienes razon no todos somos programadores investigar mas gracias a tu comentario, gracias por el efecto somos muchos los que estamos comensando
Miguel, el 06/12/2011 a las 23:12:34
Uhhmm en chrome falla, flickea una vez al principio y despues hace el fade
Christian, el 31/01/2012 a las 15:50:25
Me hace un salto raro cuando cambia la pagina es normal?