Problèmes d'animation JQuery fadeIn/fadeOut

Question

J'utilise Jquery FadeIn/FaeOut pour afficher et masquer du contenu sur ma page. Comme si:

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

Mon problème est que parce que la div « .entreprise » est placé au-dessous « .aboutcontent » quand « .entreprise » est montré qu'il apparaît sous « .aboutcontent » jusqu'à ce que la div a caché complètement, la création un effet de transition irrégulier.

Comment est-ce que je peux faire la transition entre montrer et cacher les divs lisses? Pas nerveux. Voici le code 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

Vous pouvez utiliser la fonction de rappel pour .fadeOut(), comme ceci:

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

You can give it a try here, cela ne déclenchera pas l'.fadeIn() sur .company jusqu'à ce que le fondu sur .aboutcontent est complète. Comme vous avez masqué de nombreux panneaux, dont certains sont déjà masqués, il est important d'utiliser le :visible selector pour que le rappel ne se déclenche qu'après l'extinction, pas immédiatement de celui qui se termine immédiatement ... parce qu'il est déjà caché.