Transición fade entre páginas con jQuery - Bufa Webmaster

Bufa Webmaster

Recursos web en español

Transición fade entre páginas con jQuery

13 mar 2010

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(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;
	}
 
});
1
<p>Ejemplo de uso: <a href="nuevapagina.html" class="transicion">abrir nueva página</a>.</p>
Compartir:
  • Google Bookmarks
  • Twitter
  • StumbleUpon
  • Digg
  • LinkedIn
  • del.icio.us
  • MisterWong
Escribe un comentario

Spam Protection by WP-SpamFree

Bufa en Twiter

82 post | 52 comentarios | 120 tags | 11 suscriptores

Acerca de

bufa.es es una página web montada sobre wordpress que tiene como finalidad compartir la mayoría de recursos web (scripts, php, css, jquery, wordpress, plugins, posicionamiento web, etc...) utilizados por mi en el desarrollo web.

Entries (RSS) | Comments (RSS)

© 2010 Bufa Webmaster | valid XHTML and CSS | Powered by Wordpress and design bufa