Jquery fadeIn / fadeOut动画问题

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

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

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

如何在显示和隐藏div之间进行过渡？ 没有跳跃。 这是HTML：

 
 
Developers
 
The developers are the best
 
 we have some great developers
 
  
 
Company
 
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.
 
  

Answer 1

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

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

你可以在这里尝试一下 ，这不会触发.fadeIn()上的.fadeIn()直到淡入淡出.aboutcontent完成。

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