jquery - 凌乱的 jQuery div 到 div 追加

Question

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

期望的效果：本质上，只需要让当前的 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;
}

相关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方法的回调回调函数中处理下一个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);
});

​</p>

检查小提琴