Jquery fadeIn/fadeOut animation issues.

Question

I am using Jquery FadeIn/FaeOut to show and hide content on my page. Like so:

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

My problem is that because the div '.company' is positioned below '.aboutcontent' when '.company' is shown it appears below '.aboutcontent' until the div has hidden fully, creating a unsmooth transition effect.

How can I make the transition between showing and hiding the divs smooth? Not jumpy. 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's 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(), like this:

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

You can give it a try here, this won't trigger the .fadeIn() on .company until the fade on .aboutcontent is complete.

Since you're fading out many panels, some of which are already hidden, it's important to use the :visible selector so the callback only triggers after the fading one, not instantly from the one who's fade completes instantly...because it's already hidden.