El elemento “parpadea” y se mueve en fadeOut / fadeIn

Estoy usando el siguiente código para los divs de contenido fadeOut y fadeIn en una página ( jsfiddle aquí ) …

HTML:

  
This is the main page content.
This is the about page content.

CSS:

 ul { float: left; display: block; margin-top: 50px; margin-left: 0px; } ul li { list-style: none; display: block; margin-top: 5px; } ul li a { display: block; height: 20px; width: 50px; margin: 0px; background: #7d5900; color: white; text-decoration: none; text-align: center; } div { width: 300px; height: 200px; margin: auto; margin-top: 70px; color: white; background-color: rgba(0, 36, 125, 0.5); } #aboutContent { display: none; } 

JavaScript:

 $('#indexNav').click(function() { $('#aboutContent').fadeOut('fast'); $('#indexContent').fadeIn('fast'); return false; }); $('#aboutNav').click(function() { $('#indexContent').fadeOut('fast'); $('#aboutContent').fadeIn('fast'); return false; }); 

Como se muestra en el archivo jsfiddle (al menos en Firefox 9.0.1 e IE 9 en Windows 7), al hacer clic de un lado a otro entre los enlaces para mostrar / ocultar los elementos en cuestión, hay un poco de parpadeo en toda la página como el elementos animados. Básicamente, el div mueve a lo largo de la página, lo que hace que aparezca una barra de desplazamiento y empuje el div un poco hacia la izquierda, luego vuelve a la normalidad cuando finaliza la animación.

No siendo un experto en CSS de ninguna manera, simplemente he estado haciendo pequeños retoques con esto para intentar lograr un simple efecto de desvanecimiento / desvanecimiento (usando jQuery, naturalmente). Así que me pregunto si hay una forma más correcta de hacer esto o si estoy cometiendo algún tipo de error fundamental en mi diseño que simplemente no conozco.

¿Alguna idea sobre qué podría estar causando este parpadeo y cómo corregirlo?

 $('#indexNav').click(function() { $('#aboutContent').fadeOut('fast',function(){ $('#indexContent').fadeIn('fast'); }); return false; }); $('#aboutNav').click(function() { $('#indexContent').fadeOut('fast',function(){ $('#aboutContent').fadeIn('fast'); }); return false; }); 

Esto ocurre porque sus elementos se muestran relativamente. Eso significa que cuando ambos están presentes en la pantalla, se mueven entre sí. Cuando haces un fundido cruzado, que es esencialmente lo que estás haciendo, ambos estarán en la pantalla por un tiempo. Necesitas posicionar absolutamente los elementos para ocupar el mismo espacio.

 #aboutContent, #indexContent { position: absolute; top: 10px; left: 50px; } 

Ejemplo: http://jsfiddle.net/2TDj5/

Puede colocar los elementos en un div envoltorio, lo que le permitirá colocarlos en relación con la página, pero absolutos entre sí. Solo asegúrese de configurar explícitamente la envoltura para display: relative .

Ejemplo: http://jsfiddle.net/2TDj5/1/

Me parece un simple

 .delay( 1 ).fadeIn(...) 

debería ayudar