Problemas de animación de Jquery fadeIn / fadeOut

Estoy usando Jquery FadeIn / FaeOut para mostrar y ocultar el contenido de mi página. Al igual que:

$('.subnav_company').click(function(){ $('.aboutcontent').fadeOut('slow'); $('.company').fadeIn('slow'); }); 

Mi problema es que debido a que la div ‘.company’ se coloca debajo de ‘.aboutcontent’ cuando se muestra ‘.company’, aparece debajo de ‘.aboutcontent’ hasta que la div se ha ocultado completamente, creando un efecto de transición no suave.

¿Cómo puedo hacer que la transición entre mostrar y ocultar las divs sea suave? No nervioso Aquí está el HTML:

 

Developers

The developers are the best

we have some great developers

Company

offers a complete management tool . It's an easy to use and efficient way to manage and plan stuff. It allows people to communicate and get along.

Puede utilizar la callback para .fadeOut() , como esto:

 $('.subnav_company').click(function(){ $('.aboutcontent:visible').fadeOut('slow', function() { $('.company').fadeIn('slow'); }); }); 

Puede intentarlo aquí , esto no activará .fadeIn() en .company hasta que se .company el fundido en .aboutcontent .

Dado que se están desvaneciendo muchos paneles, algunos de los cuales ya están ocultos, es importante usar el selector :visible para que la callback solo se active después del desvanecimiento, no instantáneamente del que se desvanece al instante … porque ya está oculto .