Jquery fadeIn / fadeOut动画问题 [英] Jquery fadeIn/fadeOut animation issues

问题描述

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

I am using Jquery FadeIn/FaeOut to show and hide content on my page. Like so:

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

我的问题是因为div'.company'位于'.aboutcontent'时''。公司'显示它出现在'.aboutcontent'下面，直到div完全隐藏，创建一个不平滑的过渡效果。

My problem is that because the div '.company' is positioned below '.aboutcontent' when '.company' is shown it appears below '.aboutcontent' until the div has hidden fully, creating a unsmooth transition effect.

如何在显示和隐藏之间进行转换div顺利吗？不要跳。这是HTML：

How can I make the transition between showing and hiding the divs smooth? Not jumpy. Here is the 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-->

推荐答案

您可以使用 .fadeOut（） ，如下所示：

You can use the callback for .fadeOut(), like this:

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

你可以在这里尝试一下，这不会触发 .fadeIn（） .company ，直到淡出 .aboutcontent 已完成。

You can give it a try here, this won't trigger the .fadeIn() on .company until the fade on .aboutcontent is complete.

由于您已经淡出许多面板，其中一些已经隐藏，因此使用 ：可见选择器因此回调仅在淡入淡出之后触发，而不是立即从那个褪色的人立刻完成...因为它已经隐藏了。

Since you're fading out many panels, some of which are already hidden, it's important to use the :visible selector so the callback only triggers after the fading one, not instantly from the one who's fade completes instantly...because it's already hidden.

这篇关于Jquery fadeIn / fadeOut动画问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！