-1

我编写了下面的代码，作为客户网站标题中的简单幻灯片。现在，唯一的问题是当我将它放入 for 或 while 循环时，它会到达第一个循环的末尾然后停止。

我尝试在最后一个回调中使用调用 togglinga()，我尝试将整个事情包装在一个 for 和 while 循环中，我尝试创建一个不同的函数来调用这个函数，然后使用相同的函数名最后的回调，但每次都得到相同的结果。我真的很感激有人注视着这个，看看他们是否能看到我看不到的任何东西......

    function triggerAnimation(){
        $("#logoareacontainer").delay(15000).fadeOut(3000, function() {
            $("#title-1").fadeIn(0).delay(0, function() {
                $("#cdsl-1-1").fadeIn(1000).delay(2000).fadeOut(0, function(){
                    $("#cdsl-1-2").fadeIn(0).delay(2000).fadeOut(0, function(){
                      $("#logoareacontainer").fadeIn(1000).css({display:'block'})
                    })
                })
            })
        })
    }
4

3 回答 3

5

如果您将其分解为可以以循环方式调用的函数，则会更短更容易。

请注意，.delay()它不接受回调函数，这是问题的很大一部分。

这是一个演示：http: //jsfiddle.net/kjaHZ/

// for each "title-", keep track of how many "cdsl-"s there are
var titles = [null, 4, 2, 2, 2, 1, 1];

start();

// start it off
function start() {
    $("#logoareacontainer").delay(1500).fadeOut(3000, function () {
        doTitle(1);
    });
}

// this starts a "title-" section
function doTitle(i) {
    if (i < titles.length) {
        // do the "title-" for the given "i" variable
        $("#title-" + i).fadeIn(0, function () {
            // after fading in, do the "cdsl-" ids
            doCDSL(i, 1);
        });
    } else {
        // or if "i" is >= titles.length, we're done
        $("#logoareacontainer").fadeIn(1000).css({display:'block'});
    }
}

// this starts a "cdsl-" section
function doCDSL(i, j) {
    $("#cdsl-" + i + "-" + j).fadeIn(1000)
    .delay(2000)
    .fadeOut(0, function () {
        if (j < titles[i]) {
            // move to the next "cdsl-"
            doCDSL(i, j+1);
        } else {
            // or do the next "title-"
            $("#title-" + i).fadeOut(1000).css({display:'none'})
            doTitle(i+1);
        }
    })
}
于 2013-08-31T19:44:27.060 回答
3

虽然你的代码在这里很糟糕，但你是:)你错过了()

function togglinga(){ triggerAnimation(); };
于 2013-08-31T19:05:11.167 回答
2

您不能将代码放入循环中，因为它是异步的。循环将立即启动所有动画，因为最外面的调用不会等到所有动画完成。

在最内层，只需调用triggerAnimation使其重新启动即可。

于 2013-08-31T19:03:04.047 回答