Jakeery fadeIn / fadeOut animation issues

Question

I am using jQuery FadeIn / FaeOut to show and hide content on my page. For instance:

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

My problem is that since the div “.company” is below “.aboutcontent” when “.company” is displayed, it appears below “.aboutcontent” until the div is completely hidden, creating a nonsmooth transition effect.

How can I make the transition between showing and hiding divs smooth? Do not be nervous. Here is the HTML:

<div class="aboutcontent developers">
<h1>Developers</h1>
<h4>The developers are the best</h4>
<p> we have some great developers</p>
</div>
<!--End aboutcontent developers-->


    <div class="aboutcontent company">
    <h1>Company</h1>
    <h4>offers a complete management tool . It an easy to use and efficient way to manage and plan  stuff. It allows people to communicate and get along.</h4>
    </div>
    <!--End aboutcontent company-->

Answer 1

You can use the callback for .fadeOut(), for example:

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

, .fadeIn() .company , fade .aboutcontent .

, , :visible , callback , , ... .