jQuery rotator 跳跃而不是从一个到另一个淡入淡出

Question

我尝试编写一个简单的 jQuery 旋转器来在小部件中显示不断变化的 HTML 内容。

小部件本身可以工作，每个 div 都会淡入淡出，但它们似乎重叠，导致两个 div 都显示一瞬间。

如何使可见的 div 淡出，在显示为 none 后，另一个 div 开始淡入？

function fadeNext() {
    $('#patient-stories .patient-story-single').first().fadeOut('slow').appendTo($('#patient-stories .inner'));
    $('#patient-stories .patient-story-single').first().fadeIn('slow');
}

http://jsfiddle.net/9f2bh164/

更新：

我已经设法接近了一点，因为每个 div 在下一个 div 淡入之前淡出，但它没有循环，即。显示所有 div 后返回开始。

http://jsfiddle.net/9f2bh164/2/

已解决：

http://jsfiddle.net/9f2bh164/3/

Answer 1

将连续的动画放在前一个的回调中，以确保它们遵循顺序。

function fadeNext() {
  $('#div1').fadeOut('slow', function() {
    $('#div2').fadeIn('slow');
  });
}