抱歉这个菜鸟问题,我正在尝试让三个红色气泡一一出现,请看我的代码: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);
}
非常感谢你们!
最佳答案
两个问题:
- 您在 animation_script 中调用动画方法而不是引用它们
- 您永远不会触发接下来的第一个动画。
这是两个主要的变化。
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();
添加到底部。你可以把它放在你的初始化脚本的顶部或其他地方。这仅用于演示目的。
关于jQuery 设置超时并显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13388206/