Jquery淡入/淡出动画问题

Question

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

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

我的问题是，因为当显示“.company”时，div“.company”位于“.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');           
  });
});

您可以在这里尝试一下，这不会触发 .company 上的.fadeIn() 直到 上淡入淡出.aboutcontent 已完成。

由于您要淡出许多面板，其中一些面板已经隐藏，因此使用 :visible 选择器 因此回调仅在淡入淡出后触发，而不是在淡入淡出立即完成的选择器后立即触发......因为它已经隐藏了。