Javascript Jquery队列序列动画

我有以下显示幻灯片的代码。我的问题是，一个元素在下一个元素消失之前没有完全隐藏，这导致我不得不用CSS修复它，这不是理想的情况。。代码如下：

setInterval(function() { 
  $('#slides > li:first')
    .fadeOut(500)
    .next()
    .fadeIn(500)
    .end()
    .appendTo('#slidelist');
},  2000);

我尝试了以下方法但没有成功：

setInterval(function() { 
  $('#slides > li:first')
    .fadeOut(500).delay(500)
    .next()
    .fadeIn(500)
    .end()
    .appendTo('#slidelist');
},  2000);

---

您知道如何在下一个元素淡入之前使该元素完全淡出吗？

如果希望在上一个淡出完成后开始淡出，请使用回调函数参数执行淡出。回调函数将在第一个动作淡出完成后执行

这里有一个2个div的例子-1淡出，然后1淡入。我在不透明度上使用了animate函数，这与fadeIn/fadeOut基本相同

制作动画： 淡出： 法丹：

jsfiddle：

---

希望您可以修改代码以应用此解决方案。如果没有，请发一篇文章让我知道，我可以帮助调整您的代码。

可能是重复的：-这篇文章中有很好的答案肯定会对您有所帮助。具体地说，我在寻找可以插入函数链的东西，因为我正在使用下一个函数来获取元素，如果我用回调来打破这个链，我想我可能必须将当前元素存储在一个变量中，并使当前代码变得简单。是的，我不确定在每次迭代中查询dom是否比查询一次并更新索引更好。无论哪种方式，如果您找到更好/更优雅的解决方案，请告诉我。

var $divs = $('div');

$divs.eq(0).animate( {"opacity":"0"},1000 , function() {
    $divs.eq(1).animate( { "opacity":"1" },1000)
})