延迟不延迟for循环

时间:2014-01-30 02:20:57

标签: jquery delay

我有一个弹出窗口,我想每次都显示不同的消息。而是首先运行.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);

}
});

2 个答案:

答案 0 :(得分:2)

这里的主要问题是你正在更新循环中的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);
})

演示:Fiddle

答案 1 :(得分:0)

我认为你需要setTimeout

$(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);
    }
});
相关问题