JQuery - timeline for events / animations

Question

How will I tell some events / animations to run at a specific time?

I am trying to make an animated battle scene between several characters, so what would be the best way for the script to complete its actions, for example, who attacks next and so on?

Here is my sandbox where you can see how 2 left mannequins move towards the mannequin on the right: http://vilegaming.com/sandbox.x

How can I make the correct fictitious attack of one of the mannequins on the left after they attacked him?

I think I'm really looking for how to set up a time-based event schedule, because not all attacks / animations will be right after each other.

Answer 1

Given the complex animation behavior you are looking for, I would definitely limit runaway callbacks and timeouts.

I would do something like this:

// first define the atomic animation effects

function first_figure_moves_towards_second_figure() {
    // animation calls
}

function first_figure_attacks() {
    // animation calls
}

function second_figure_blocks_attack() {
    // animation calls
}


var animation_script = [
    {
         at_time: 30 * 1000, // 30 seconds
         animation: first_figure_moves_towards_second_figure
    },
    {
         at_time: 31 * 1000, // 31 seconds
         animation: first_figure_attacks
    },
    {
         at_time: 32 * 1000, // 32 seconds
         animation: second_figure_blocks_attack
    }
];

Then execute the master function with an animation control script, for example:

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

With this, you can define your animations without messing up callbacks, timeouts, and intervals - and instead focus on script animation and atomic animation blocks.

Edit after comments:

Note that the names of the functions in the script animation (for example, first_figure_attacks) are references to functions - saved for later execution. Adding parameters will lead to their functional calls - their immediate execution.

You can use anonymous functions to add the following parameters:

var animation_script = [
    {
        at_time: 5 * 1000,
        animation: function () { doAttack('left', '#char1', '#char2', 2000); }
    }
];

, , , doAttack, , :

function doAttack(side, c1x, c2x, speed) {
    // animation calls
}

function attackAnimation(side, c1x, c2x, speed) {
    return function () {
        doAttack(side, c1x, c2x, speed);
    };
}

var animation_script = [
    {
        at_time: 5 * 1000,
        animation: attackAnimation('left', '#char1', '#char2', 2000)
    }
];

Answer 2

setTimeout. , x . , , , .

( , -). , , , -, -.

//invoke attack
attack( callbackEvent );

function attack( callbackFn ){

   //attack code

   //invoke callback
   callbackFn && callbackFn()
}

function callbackEvent(){

   //next attack in 5 seconds
   window.setTimeout( function(){
         attack(callbackEvent);
   }, 5000);

}

Answer 3

// delay 5000 means after 5 sec
$("#mydiv").delay(5000).animate({"left":160},1000);