带有数组的Javascript/jQuery动画

我正在用HTML、CSS和Javascript构建一个动画场景。目前，我有2个函数，我想为每一条鱼设置动画。第一个用于将其发送到屏幕上，第二个用于在其离开屏幕后重置其位置

下面是这两个函数的样子

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

我对场景中的所有其他鱼也使用了非常类似的函数，但我想在脚本的开头创建两个数组，一个用于ID，一个用于速度，就像这样

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

然后让我写的函数提前运行，但用数组中的项目替换fish和speed

---

我该怎么做？

这是怎么回事？这为所有动画/CSS移动提供了一个通用的功能。就动画而言，速度是根据需要从数组中读取的

函数需要两个参数——第一个是元素的ID（减去#）；第二个阶段（就像在原始代码中一样，fish1有一个阶段1函数，fish1有一个阶段2函数）

要使函数适用于其他动画元素，只需扩展switch语句

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

---

我想到两条评论：a）您确定每个动画项目都需要单独的功能吗？b） 如果所有动画项目同时移动，或者它们之间有一些延迟？非常好的点@Utkanos a）只使用1个函数就可以完成我想做的事情会更好b）现在我正在模拟延迟，让鱼从屏幕上开始，然后其他人使用CSS，但是如果我继续我现在尝试做的事情，而不添加第三个延迟数组，它将不起作用。动画适用于fish1，但不设置任何其他鱼的动画。我需要为每条鱼硬编码一个案例吗？我用底部的线

do\u Action（'fish1'，1）

开始了fish1的工作。你需要更多这样的鱼线来钓其他的鱼（但首先需要为函数的

开关
语句做好准备，正如我在回答中所写的。我看到这比我原来的要好得多，但我真的在寻找这样的例子，每次我添加一条新鱼，我只需将ID添加到数组中，并将速度添加到数组中。过程是什么正如你所说，我必须在HTML和CSS文件中创建鱼，但对于JS，我只希望能够有'var fish=[“#fish1”，“#fish2”，“#oldBoot”]；'和'var speeds=[“6000”，“7000”，“5000”]；'然后每当我添加一条新鱼时，我只需要将其ID添加到'fish'，将其速度添加到'speeds'。