Jquery淡入淡出动画问题

Question

我正在使用Jquery FadeIn/FaeOut在我的页面上显示和隐藏内容。像这样：

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

我的问题是，由于在div“公司”被定位低于“.aboutcontent”当“公司”显示其下方出现“.aboutcontent”直到div有完全隐藏起来，创建过渡效果不佳。

如何让显示和隐藏div平滑过渡？不要跳动。下面是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

可以使用回调.fadeOut()，像这样：

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

You can give it a try here，这不会触发.company的.fadeIn()直至淡出上.aboutcontent已经完成。

由于您正在淡出很多面板，其中一些面板已隐藏，因此使用:visible selector这一点非常重要，因此回调仅在淡入淡出之后触发，而不是立即从淡入淡出完成的瞬间触发......因为它是已经隐藏。