3

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

1 回答 1

3

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

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

您可以在这里试一试，在淡入淡出完成之前不会触发.fadeIn()开启。.company.aboutcontent

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

于 2010-09-08T13:55:43.663 回答