CODEWITHSUNDEEP
javascriptjqueryhtmlcssarrays
Philip Kirkbride
Philip Kirkbride

Reputation: 22889

Javascript/jQuery animations with an array

I'm building an animated scene with HTML, CSS, and Javascript. Currently I have 2 functions for each fish that I want to animate. The first to send it across the screen and the second to reset its position once its off the screen.

Here is what the 2 functions look like...

function fish1Swim1() {
    var ranNum = Math.round(Math.random() * 2.5);
    var speed = 6000 * ranNum;
    var screenW = screenWidth+350;
    $('#fish1').animate({
        left: -screenW,
    }, speed, function () {
        fish1Swim2();
    });
}

function fish1Swim2() {
    var ranNum = Math.round(Math.random() * 7);
    var top = ranNum * 100;
    var screenW = screenWidth+350;
    $('#fish1').css("left", screenW);
    $('#fish1').css("top", top);
    fish1Swim1();
}

I'm using very similar functions for all the other fish in the scene as well, but I'd like to create 2 arrays at the beginning of the script, one for the IDs and one for speed like so... 

var fish=["#fish1","#fish2","#oldBoot"];
var speeds=["6000","7000","5000"];

Then have the function I wrote early run but replacing the fish and speed with the items from the arrays.

How can I do this?

Upvotes: 0

Views: 296

Answers (1)

Mitya
Mitya

Reputation: 34596

How's this? This provides a generalalised function for all animation/CSS movement. Where animation is concerned, the speed is read from an array, as you wanted.

The function expects two arguments - the first, the ID of the element (minus #); the second, the phase (like in your original code - you had a phase 1 function for fish 1, and a phase 2 function for fish 1).

To make the function work for the other animatory elements, just extend the switch statements.

//element data and corresponding anim speeds
var speeds = {fish1: 6000, fish2: 7000, oldBoot: 5000};

//main animation/movement func
function do_action(id, phase) {

    var el, jq_method, method_data, after;

    //work out what it is we're doing, and to what, and set some details accordingly
    switch (id) {
        case 'fish1':
            el = $('#fish1');
            switch (phase) {
                case 1:
                    jq_method = 'animate';
                    method_data = [
                        {left: -screenWidth+350},
                        Math.round(Math.random() * 2.5) * speeds[id],
                        function() { do_action('fish1', 2); }
                    ];
                    break;
                case 2:
                    jq_method = 'css';
                    method_data = [
                        {top: Math.round(Math.random() * 700), left: screenWidth+350}
                    ];
                    after = function() { do_action('fish1', 1); };

                break;
            }
            break;
        break;
    }

    //do actions
    el[jq_method].apply(el, method_data);
    if (after) after();

}

//and off we go
do_action('fish1', 1);

Upvotes: 1

Related Questions