Jquery 在for循环中延迟而不是延迟

我有一个弹出窗口，我想每次显示不同的消息。相反，首先运行.html（）jQuery，我看到的只是最后一个数组项

$(document).ready(function () {

var popArray = ["App1","app2","app3","app4","app5","app6","app7","app9","app10"];

for ( var i = 0; i < popArray.length; i++ ) {

$('.site-footer h2').html(popArray[i]);
$('.site-footer').delay(1000).slideUp(300).delay(1000).slideDown(300);

}
});

$（文档）.ready（函数（）{
var popArray=[“App1”、“app2”、“app3”、“app4”、“app5”、“app6”、“app7”、“app9”、“app10”]；
对于（var i=0；i

这里的主要问题是您正在更新循环中的html，并且动画是异步的，因此循环将首先执行，然后动画将开始，这意味着当动画开始时，

h2

将数组中的最后一项作为其内容

var popArray = ["App1", "app2", "app3", "app4", "app5", "app6", "app7", "app9", "app10"];
$.each(popArray, function (i, v) {
    $('.site-footer').queue(function () {
        $(this).find('h2').html(popArray[i]);
        $(this).dequeue()
    }).delay(1000).slideUp(300).delay(1000).slideDown(300);
})

---

演示：

我想您需要

设置超时

这里：

$(document).ready(function () {
    var popArray = ["App1","app2","app3","app4","app5","app6","app7","app9","app10"];

    for (var i = 0; i < popArray.length; i++ ) {
        setTimeout(function() {
            $('.site-footer h2').html(popArray[i]);
            $('.site-footer').slideUp(300).delay(1000).slideDown(300);
        }, i * 1000);
    }
});

$（文档）.ready（函数（）{
var popArray=[“App1”、“app2”、“app3”、“app4”、“app5”、“app6”、“app7”、“app9”、“app10”]；
对于（var i=0；i

谢谢你，这对我来说几乎奏效了。但是当旗帜升起时，html会发生变化。我不想看到这种变化！另一个版本是完美的。