jQuery 设置超时和显示答案

【问题标题】：jQuery settimeout and showjQuery 设置超时和显示
【发布时间】：2012-11-14 22:06:40
【问题描述】：

对不起这个菜鸟问题，我正在努力让三个红色的气泡一个一个出现，请看我的代码：http://jsfiddle.net/FLt9Z/

javascript 的那部分看起来像这样：

function leftappear() {
    $('#redbubble-left').show();
}

function topappear() {
    $('#redbubble-top').show();
}

function rightappear() {
    $('#redbubble-right').show();
}


var animation_script = [
    {
         at_time: 30 * 1000, // 30 seconds
         animation: leftappear()
    },
    {
         at_time: 31 * 1000, // 31 seconds
         animation: topappear()
    },
    {
         at_time: 32 * 1000, // 32 seconds
         animation: rightappear()
    }
];

var current_time = 0;

function animate_next() {
    var next = animation_script.shift(),
        time_between = next.at_time - current_time;
    setTimeout(function () {
        current_time = next.at_time;
        next.animation();
        animate_next();
    }, time_between);
}

非常感谢大家！

【问题讨论】：

漂亮的图形，但您的消息缺少一个问题。不要让我们猜测这个问题，否则它可能会被关闭。

标签： jquery html css jquery-animate settimeout

【解决方案1】：

两个问题：

您是在调用动画方法而不是在您的动画脚本中引用它们
您从未触发下一个 FIRST 动画。

http://jsfiddle.net/FLt9Z/1/

这是两个主要变化。

var animation_script = [
    {
         at_time: 2* 1000, // 30 seconds
         animation: leftappear // NOTE: drop the parens ()
    },
    {
         at_time: 3* 1000, // 31 seconds
         animation: topappear // NOTE: drop the parens ()
    },
    {
         at_time: 4* 1000, // 32 seconds
         animation: rightappear // NOTE: drop the parens ()
    }
];

然后 2，开始，我只是在底部添加了animate_next();。您可以将它放在顶部或其他地方的初始化脚本中。这仅用于演示目的。

【讨论】：

【解决方案2】：

除了第一个答案，我还想指出您当前的代码会继续调用自己，即使它通过了要显示的气泡列表，而是我只会循环一次并设置超时：

$.each(animation_script, function(i, animation) {
    var next = animation_script.shift(),
        time_between = next.at_time - current_time;
    setTimeout(function() {
        current_time = next.at_time;
        next.animation();
    }, time_between);
});

【讨论】：

我想我明白了。谢谢:)