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這一點非常重要，因此回調僅在淡入淡出之後觸發，而不是立即從淡入淡出完成的瞬間觸發......因爲它是已經隱藏。