Question

Sorry for this rookie question, I am trying to make the three red speech bubbles appear one by one, please see my code here: http://jsfiddle.net/FLt9Z/

That section of javascript looks like this:

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);
}

Thanks a lot guys!

Answer 1

Two issues:

1. You were CALLING the animation methods instead of REFERENCING them in your animation_script
2. you were never triggering the FIRST animate next.

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

Here are the two major changes.

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 ()
    }
];

and then 2, kicking it off, I simply added animate_next(); to the bottom. You can put this in your init script at the top or somewhere else. This was just for demo purposes.