杂乱的jQuery div到div追加

Question

我遇到了jQuery div在第一次加载页面时附加div的问题。

期望效果： 基本上，只需要让当前的div淡出，暂停，然后下一个淡入。

结果： 新添加的div跳转到div的顶部以附加到，强制前一个div下来并且看起来不美观。尽管有.delay()函数，但在前一个div完成淡出之前，几乎就像div已经淡入淡出一样。

原始的jQuery代码：

$(document).ready(function(){
$("#blurb > div:gt(0)").hide();
setInterval(function() { 
$('#blurb > div:first')
.fadeOut(1000)
.delay(1000)
.next(1)
.fadeIn(1000)
.end(1)
.appendTo('#blurb');
},  5000);
});

相关CSS：

#blurb{
float:right;
text-align:right;
width:300px;
font-size:16px;
margin-right:-20px;
height:100px;
z-index:-100;
}
#blurb > div{
position:relative;
z-index:-100;
height:100px;
}

相关HTML：

<div id="blurb">
<div>
<b style="font-size:18px;color:#EF116A;">Having problems?</b><br>
Please call our Sheffield-based support team on <b>0114 303 3232</b>.
</div>
<div>
<b style="font-size:18px;color:#EF116A;">Having problems?</b><br>
Please email our Sheffield-based support team at <b>support@ask4.com</b>.
</div>
<script>
jQuery script as above
</script>
</div>

（请忽略非验证等，这只是一个实验）

非常感谢，

奥利弗

Answer 1

如果您希望在当前动画完成后淡入下一个div，则需要在fadeOut方法的回调回调函数中处理nextdiv的淡入。

    $(document).ready(function() {
    $("#blurb > div:gt(0)").hide();
    setInterval(function() {
        $('#blurb >div:first')
            .fadeOut(1000 , function() {
                 $(this).next(1).delay(1000).fadeIn(1000)
                                .end(1).appendTo('#blurb');
            })  
    }, 5000);
});

<强> Check Fiddle