Javascript 如何使用jquery设置数组的动画

我有一个边框9x9，有直线、圆柱和正方形，就像数独的边框，我想给它设置动画，但是当同时有多个动画时，我遇到了一些问题，所以我决定每次给一个元素数组设置动画，因为我把它们放在一个数组中，想一个一个地给它设置动画，但我遇到了一些问题。 这是我的一段代码：

var col,
        row,
        square,
        arr = [];

    col = checkColumn(cell);
    row = checkRow(cell);
    square = checkSquare(cell);

    if(row != null){
        arr.push(row);
    }

    if(col != null){
        arr.push(col);
    }

    if(square != null){
        arr.push(square)
    }

    if(arr.length !=0){
        arr.each(function(){
            enlight($(this));
        });
    }

因此，目前我无法使用arr.each，因为它表示arr不是函数，如果我将arr更改为：

arr ={}

我不能使用。按添加元素，是否有一个解决方案来逐个设置它们的动画？ 提前感谢您的帮助

光线可以做到这一点：

function enlight(cells){
    var delayTime=0;
    cells.each(function(){
        $(this).parent().delay(delayTime).animate({
            "background-color" : "#ffa500"

        }, 500).delay(100)
            .animate({
                "background-color" : "#ffffff"
            });
        delayTime+=100;
    })

}

所以，我希望每次都发送一个数组（行、列和方）来逐个设置动画，而不是同时全部设置动画

一些HTML：

<div class="board">
      <div class="row">
        <div class="cell">
            <input type="number"  data-column="0" data-line="0">
        </div>
        <div class="cell">
            <input type="number"  data-column="1" data-line="0">
        </div>
        <div class="cell">
            <input type="number"  data-column="2" data-line="0">
        </div>
        <div class="cell">
            <input type="number"  data-column="3" data-line="0">
        </div>
        (more cells 81 in total)

（共有81个单元格）

所以我决定每次制作一个元素数组的动画，为此我 将它们放入一个数组中，并希望逐个设置动画

您可以使用，

.promise（）

，

.then（）

，

$.map（）

按顺序为元素设置动画

//将`.row`元素的队列名称设置为`“启蒙”`迭代`.row`元素
$（{}）.queue（“启蒙”，$.map（$（“.row”），函数（el，索引）{
//返回一个函数以推送到“启蒙”队列
返回函数（下一步）{
//将“.cell input”元素的队列名称设置为“cells”`
//在“.cell”元素中迭代“input”元素
$（{}）.queue（“cells”，$.map（$（“.cell>input”，el），函数（cell）{
//返回一个函数以推送到“cells”队列
返回函数（下一步）{
//设置“.cell input”元素的动画
$（单元格）。延迟（100）。设置动画({
“背景色”：“ffa500”
}延迟（100）
.制作动画({
“背景色”：“#ffffff”
})
//当前“.cell input”元素动画完成时
//在“单元格”队列中调用“下一步”函数
.promise（）。然后（_next）
}
//调用“cells”队列中的第一个函数
//调用所有“单元格”队列函数后
//在“启蒙”队列中调用“下一步”函数
})).dequeue（“cells”）。promise（“cells”）。然后（下一个）
}
//调用“启蒙”队列中的第一个函数
})).出列（“开导”）.承诺（“开导”）
//当“启蒙”和“单元格”中的所有函数`
//已调用队列
.然后（函数（）{
console.log（“所有动画完成”）
});

首任董事会
第一排


二板
第二排

所以我决定每次制作一个元素数组的动画，为此我
将它们放入一个数组中，并希望逐个设置动画

您可以使用，
.promise（）
，
.then（）
，
$.map（）
按顺序为元素设置动画


//将`.row`元素的队列名称设置为`“启蒙”`迭代`.row`元素
$（{}）.queue（“启蒙”，$.map（$（“.row”），函数（el，索引）{
//返回一个函数以推送到“启蒙”队列
返回函数（下一步）{
//将“.cell input”元素的队列名称设置为“cells”`
//在“.cell”元素中迭代“input”元素
$（{}）.queue（“cells”，$.map（$（“.cell>input”，el），函数（cell）{
//返回一个函数以推送到“cells”队列
返回函数（下一步）{
//设置“.cell input”元素的动画
$（单元格）。延迟（100）。设置动画({
“背景色”：“ffa500”
}延迟（100）
.制作动画({
“背景色”：“#ffffff”
})
//当前“.cell input”元素动画完成时
//在“单元格”队列中调用“下一步”函数
.promise（）。然后（_next）
}
//调用“cells”队列中的第一个函数
//调用所有“单元格”队列函数后
//在“启蒙”队列中调用“下一步”函数
})).dequeue（“cells”）。promise（“cells”）。然后（下一个）
}
//调用“启蒙”队列中的第一个函数
})).出列（“开导”）.承诺（“开导”）
//当“启蒙”和“单元格”中的所有函数`
//已调用队列
.然后（函数（）{
console.log（“所有动画完成”）
});

首任董事会
第一排


二板
第二排
Javascript中的数组类型不包含每个函数，但Jquery包含

每个（数组、回调）

考虑到这一点，解决方案是在每个函数中使用Jquery：

if(arr.length !=0){
    $each(arr,function(){
        enlight($(this));
    });
}

编辑：

您可以在Officel文档中获得有关如何使用JQuery的详细信息。每个函数：
Javascript中的数组类型不包含每个函数，但Jquery包含

每个（数组、回调）

考虑到这一点，解决方案是在每个函数中使用Jquery：

if(arr.length !=0){
    $each(arr,function(){
        enlight($(this));
    });
}

编辑：

您可以在Officel文档中获得有关如何使用JQuery的详细信息。每个函数：
设置什么动画，这是一个数组和一些未指定的函数？col、row和square是每个9个单元格的数组，enlight函数工作得很好，但我只想一次传递其中一个。您一次传递一个，但动画可能是异步的，所以您必须等待一些东西，但由于代码未发布，没有办法知道要等待什么，或者等待多长时间？我的问题不是，问题在于var arr，如果我让它arr=[]，我就不能使用函数arr.each（）。如果我设置为arr={}，我就不能使用函数.push（），也许我只是让这件事复杂化了，下面是另一个e