jQuery旋转器跳跃而不是从一个渐变到另一个

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都被显示时，回到开始。

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

解决：

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;