javascript - 如何使用jquery对数组进行动画处理

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

}

所以，我想每次发送一个数组(行、列和正方形)来逐个动画，而不是同时动画。

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

so I decided to animate one array of elements each time, for that I putted them in an array and want to animate it one by one

您可以使用.queue() 、 .promise()、.then()、$.map() 按顺序对元素进行动画处理。

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

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