Javascript/jQuery animations with an array

Question

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?

Two comments come to mind: a) are you sure you need separate functions for each animated item? b) should all the animated items move at the same time, or is there some delay between them? — Mitya
– Mitya, Commented Jul 12, 2012 at 15:23
Very good points @Utkanos a) having what I want done using only 1 function would be way better b) Right now I'm simulating delay by having the fish start further off the screen then others with CSS but if I go ahead with what I'm trying to do now without adding a 3rd array for delay it won't work. — Philip Kirkbride
– Philip Kirkbride, Commented Jul 12, 2012 at 15:29

Mitya · Accepted Answer · 2012-07-12 15:53:47Z

1

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

answered Jul 12, 2012 at 15:53

Mitya

34.7k15 gold badges70 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Philip Kirkbride Over a year ago

The animation works for fish1 but doesn't animate any of the other fish. Would I need to hard code a case for each fish?

Mitya Over a year ago

I kicked things off for fish 1 with the line do_Action('fish1', 1) at the bottom. You'd need more lines like that for the other fish (but first the function's switch statement would need to be prepared for them, as I wrote in my answer.

Philip Kirkbride Over a year ago

I see this is significantly better then what I had originally but I'm really looking for something like this example api.jquery.com/jQuery.each where every time I add a new fish I only have to add the ID to an array and the Speed to an array.

Mitya Over a year ago

What is the process of adding a new fish, as you say?

Philip Kirkbride Over a year ago

I would have to create the fish in the HTML & CSS file but for JS I just want to be able to have 'var fish=["#fish1","#fish2","#oldBoot"];' & 'var speeds=["6000","7000","5000"];' Then whenever I add a new fish I only have to add its ID to 'fish' and Speed to 'speeds'.

Collectives™ on Stack Overflow

Javascript/jQuery animations with an array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related