jQuery淡入/淡出动画问题

Question

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

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

我遇到的问题是，由于'.company' div位于'.aboutcontent'下方，因此当显示'.company'时，它会出现在'.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-->

- user342391

Answer 1

您可以像这样使用回调函数来.fadeOut()：

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

你可以在这里尝试一下, 这不会立即触发 .company 上的 .fadeIn(), 直到 .aboutcontent 上的淡出完成.

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

- Nick Craver