Question

我有一个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 ={}

我不能使用.push添加元素，是否有解决方案逐个动画它们？提前感谢您的帮助！

enlight这样做：

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

}

所以，我想每次都发送一个数组（row，col和square）来逐个动画，而不是同时进行动画制作。

一些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)

Answer 1

所以我决定每次动画一个元素数组，为此我把它们放在一个数组中，并希望逐个动画

您可以使用.queue()，.promise()，.then()，$.map()按顺序为元素设置动画。

＆＃13;

// set queue name for `.row` element to `"enlighten"` iterate `.row` elements
$({}).queue("enlighten", $.map($(".row"), function(el, index) {
  // return a function to push to `"enlighten"` queue
  return function(next) {
    // set queue name for `.cell input` elements to `"cells"`
    // iterate `input` elements within `.cell` elements
    $({}).queue("cells", $.map($(".cell > input", el), function(cell) {
      // return a function to push to `"cells"` queue
      return function(_next) {
        // animate `.cell input` elements
        $(cell).delay(100).animate({
            "background-color" : "#ffa500"
        }, 500).delay(100) 
        .animate({
          "background-color" : "#ffffff"
        })
        // when current `.cell input` element animation completes
        // call `_next` function in `"cells"` queue
        .promise().then(_next)           
      }
    // call first function in `"cells"` queue
    // when all `"cells"` queue functions have been called
    // call `next` function in `"enlighten"` queue
    })).dequeue("cells").promise("cells").then(next)
  }
// call first function in `"enlighten"` queue
})).dequeue("enlighten").promise("enlighten")
// do stuff when all functions in `"enlighten"` and `"cells"`
// queues have been called
.then(function() {
  console.log("all animations complete")
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script   src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"   integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="   crossorigin="anonymous"></script>
first board
<div class="board">
  first row
  <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>
  </div>
</div>
<br>
second board
<div class="board">
  second row
  <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>
  </div>
</div>

＆＃13;

Answer 2

Javascript中的数组类型不包含每个函数，但Jquery会这样做。

jQuery.each（array，callback）

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

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

修改

您可以在官方文档中获取有关如何使用JQuery.each函数的更多详细信息： http://api.jquery.com/jquery.each/

如何使用jquery为数组数组设置动画

2 个答案: