Transición se muestra doble

bcjmpr · #1 (**permalink**) 01/04/2011, 10:33

Bueno, recién empiezo a usar javascript y aunque en general lo he podido hacer funcionar, ya me atoré con algo.

Estoy haciendo la página para un cliente y me pidió que el contenido de cada seccion entre como fadein al cambiar de una a otra. Sólo la parte del "main" entra como transición, es decir, el "header" y el "footer" están estáticos.

Usé el siguiente código dentro de <head></head>:

Código:

<script type="text/javascript" language="JavaScript" src="jquery-1.5.1.js"></script>
	<script type="text/javascript" language="JavaScript">
		$(document).ready(function() {
		$("div.main").css("display", "none");
		$("div.main").fadeIn(2000);
		$("a.transicion").click(function(event){
			event.preventDefault();
			linkDestino = this.href;
			$("div.main").fadeOut(1000, redireccionarPag);		
		});
		function redireccionarPag() {
			window.location = linkDestino;
		}
		});
	</script>

Donde "div.main" es la parte del contenido que quiero que haga fadein.

El problema viene después. Al moverme entre las secciones primero hay un flashazo, es muy rápido, a veces casi imperceptible, del contenido de "div.main" e inmediatamente después se borra y es entonces cuando entra como fadein. ¿Por qué puede estar pasando esto? ¿tendrá que ver con la conexión de internet?

Agradecería si alguien me puede guiar con lo que estoy haciendo mal :)

caricatos · #2 (**permalink**) 01/04/2011, 11:21

Tema movido desde javascript

bcjmpr · #3 (**permalink**) 01/04/2011, 20:20

Cambié el código como sigue, pero no resolvió el problema. Al cambiarme a la sección del fadein aparece un 'flashazo' del div para quitarse inmediatamente y luego entrar con fadein.

Código:

<script type="text/javascript" language="JavaScript">
		$(document).ready(function() {
		$('div.main').hide().fadeIn(2000);
		});
	</script>

Dentro del <div class="main"> tengo imágenes y texto. ¿Será que por ahí va el problema? Ya no sé qué intentar.

Agradezco la ayuda :)

bcjmpr · #4 (**permalink**) 03/04/2011, 15:16

Al fin lo resolví, creo que di vueltas innecesarias pero logré un resultado satisfactorio.

Agregué "display: none" al css y para hacer que el contenido se mostrara aun cuando no estuviera habilitado javascript, seguí las recomendaciones que encontré en este post: http://greatwebguy.com/programming/css/writing-javascript-specific-css/.

Quiza a alguien más le sirva :)

InKarC · #5 (**permalink**) 03/04/2011, 18:51

Esto es por que fadeIn solo funciona cuando el div se encuentra en display:none.

Personas que "no tienen habilitado javascript" es un mito urbano, ni Youtube ni Facebook funcionan sin javascript activado.