Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Transición se muestra doble

Estas en el tema de Transición se muestra doble en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/04/2011, 10:33
 
Fecha de Ingreso: noviembre-2010
Mensajes: 27
Antigüedad: 13 años, 4 meses
Puntos: 0
Transición se muestra doble

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 :)
  #2 (permalink)  
Antiguo 01/04/2011, 11:21
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Tema movido desde javascript
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 01/04/2011, 20:20
 
Fecha de Ingreso: noviembre-2010
Mensajes: 27
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Transición se muestra doble

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 :)
  #4 (permalink)  
Antiguo 03/04/2011, 15:16
 
Fecha de Ingreso: noviembre-2010
Mensajes: 27
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Transición se muestra doble

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 :)
  #5 (permalink)  
Antiguo 03/04/2011, 18:51
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 18 años, 4 meses
Puntos: 87
Respuesta: Transición se muestra doble

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.

Etiquetas: doble, javascript, muestra
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:39.