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

Question

I tried to code a simple jQuery rotator to display changing HTML content in a widget.

The widget itself works, and each div fades in and out, but they seem to overlap, resulting in both divs being shown for a split second.

How can I make it so that the visible div fades out, and after it's displayed as none, the other div starts to fade in?

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/

UPDATE:

I've managed to get a bit closer, in that each div is fading out before the next one fades in, but it's not looping ie. going back to the start when all divs have been shown.

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

SOLVED:

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

Answer 1

Place the successive animations inside the previous one's callback to ensure they follow order.

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