Javascript and jQuery - Advanced sequential animation

Question

Hello,

I hope somebody could help me out, I have no idea how to solve this problem.

so first, here's a php array: http://pastie.org/private/s99d8w7cbhjd2yucdijw

if i do print_r for mysql ID=1, it would be like that: http://pastie.org/private/5b9n86dnxlp96afpiwvjeg

now i'm pushing data to javascript:

var sec_0_f = [];
<?php foreach ($action_events["2nd"]["0"]["Free"] as $key => $value) : ?> 
sec_0_f.push('<?php echo $value; ?>');
<?php endforeach ?

and so on..

Array contains messages, which varies each time, depends on mysql ID call. However, I would need to make some sort of a sequence. So message would display in #notice ( http://pastie.org/private/ge5ceqpihkbl82hs3ya3g ). And then each #notice would trigger an animation, so #notice animation1, #notice animation2 etc, depends on number of messages.

So there would be max 20 javascript arrays filled with data.. Here comes the needed "system", which is splitted into 2 sections. So the 1nd one would sequentaly display 2 "Free" and 1 "Corner" message in #notice and each will trigger the function, but not in the exact order, if you know what i mean. For each messages of  "Free", "Corner" etc, I have premade functions. Names of functions are "Event"+"Team"+"Number". Here's example: http://pastie.org/private/9j6rcf5f8lb5jmegbbqtog

(would actually need to put some callback there, when it's done..). But for each mysql ID, the same function would need to be grabbed.. So I'm thinking about creating additional field under each ID which some data and make sure that each time calls the same..

Sorry for a long message, but I've been trying to come up with something for days, without success. Does anybody have any idea how should I approach this? Did I take the right method to do this?

Answer 1

If I get it right, is this (click for demo) what are you trying to do?

It basically fills the actions in an array (like you do in php), then steps in that array, takes the first object and display it, then waits a second, then goes to step into the next object, and so on till all the actions are sequentially displayed.