Javascript 有人能看看jqueryi'；我对？（设置间隔、淡出/淡出）有问题

我需要有三个元素与淡入过渡交替。我让它在大部分情况下工作，但由于某种原因，当它返回到第一个元素时，它跳过淡入淡出，只是出现了。我肯定我在这里遗漏了一些相当明显的东西，但我就是看不到

任何帮助都将不胜感激。 谢谢

JSIDLE链接：

HTML

javascript/jQuery

$(document).ready(function() {
    var fade = 1000;
    var wait = 1000;
    var $selection = $('.selection');
    var selectionQty = $selection.length;
    var c = 0;
    $('.selection').fadeOut(0);
    $('.selection').first().fadeIn(0);
    setInterval(
        function() {
            c+=1;
            if(c == selectionQty) {
                c = 0;
            }
            $selection.eq(c).addClass('top').fadeIn(fade);
            $selection.delay(fade).fadeOut(0).removeClass('top');
            $selection.eq(c).fadeIn(0);
        },
        fade+wait
    );

    $('#console').append('<p>-'+selectionQty+'</p>');
});

$（文档）.ready（函数（）{
var=1000；
var-wait=1000；
变量$selection=$（'.selection'）；
var selectionQty=$selection.length；
var c=0；
$（'.selection'）。淡出（0）；
$（'.selection'）.first（）.fadeIn（0）；
设定间隔(
函数（）{
c+=1；
如果（c==选择数量）{
c=0；
}
$selection.eq（c）.addClass（'top'）.fadeIn（fade）；
$selection.delay（fade）.fadeOut（0）.removeClass（'top'）；
$selection.eq（c）.fadeIn（0）；
},
淡出+等待
);
$（“#控制台”）.append（“-”+selectionQty+”
”）；
});

您不能使用

setInterval（）

来维护事件的同步链。在动画的回调函数中使用

setTimeout（）

您有三个动画同时触发

$selection.eq(c).addClass('top').fadeIn(fade);
$selection.delay(fade).fadeOut(0).removeClass('top');
$selection.eq(c).fadeIn(0);

---

哪一个先/最后完成？通常，当最后一个任务完成时，您需要使用

setTimeout（）

（有例外）

谢谢，在setInterval内的第二个和第三个动画中使用setTimeout非常有效。

$selection.eq(c).addClass('top').fadeIn(fade);
$selection.delay(fade).fadeOut(0).removeClass('top');
$selection.eq(c).fadeIn(0);