Jquery淡入/淡出动画问题答案

【问题标题】：Jquery fadeIn/fadeOut animation issuesJquery淡入/淡出动画问题
【发布时间】：2011-04-09 18:21:49
【问题描述】：

我正在使用 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-->

【问题讨论】：

标签： jquery effects fadein transition fadeout

【解决方案1】：

您可以使用.fadeOut() 的回调，如下所示：

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

You can give it a try here，在.aboutcontent 上的淡入淡出完成之前，这不会触发.company 上的.fadeIn()。

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

【讨论】：