Messy jQuery div to div append

Question

我在第一次加载页面时遇到jQuerydiv以附加

div的问题。

预期效果：从本质上讲，只需要让当前的div 淡出、暂停，然后下一个淡入。

结果：新附加的div 跳到要附加到的div 顶部，迫使前一个div 向下并且看起来不雅观。几乎就像div 在前一个淡出之前淡入，尽管功能.delay()。

原始的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;
}

相关网页：

<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>[e-mail]</b>.
</div>
<script>
jQuery script as above
</script>
</div>

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

非常感谢，

奥利弗

Answer 1

如果您希望在

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

    $(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);
});

​

检查小提琴