Question

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

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

我的问题是因为div'.company'位于'.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-->

Answer 1

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

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

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

由于你已经淡出了许多面板，其中一些已经隐藏了，所以使用:visible selector非常重要，因此回调只会在淡化之后触发，而不是立即从淡入淡出的人立即完成。因为它已经隐藏了。

Jquery fadeIn / fadeOut动画问题

1 个答案: