title: How to animate an array of array with jquery
body: <p>I have a border 9x9, with lines, columns and squares, like a sudoku border and I want to animate it but I had a few problems when there was multiple animations at same time, 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 but I'm having some issues.
  There is a piece of my code:</p>
  
  <pre><code>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));
          });
      }
  </code></pre>
  
  <p>So, at the moment I can't use arr.each because it says arr isnt a function, If I change arr to:</p>
  
  <pre><code>arr ={}
  </code></pre>
  
  <p>I can't use .push to add the elements, is there an solution to animate them one by one?
  Thank you in advance for the help!</p>
  
  <p>The enlight does this:</p>
  
  <pre><code>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;
      })
  
  }
  </code></pre>
  
  <p>So, I want to sent an array each time (row, col and square) to animate one by one not all at same time.</p>
  
  <p>Some HTML:</p>
  
  <pre><code>&lt;div class="board"&gt;
        &lt;div class="row"&gt;
          &lt;div class="cell"&gt;
              &lt;input type="number"  data-column="0" data-line="0"&gt;
          &lt;/div&gt;
          &lt;div class="cell"&gt;
              &lt;input type="number"  data-column="1" data-line="0"&gt;
          &lt;/div&gt;
          &lt;div class="cell"&gt;
              &lt;input type="number"  data-column="2" data-line="0"&gt;
          &lt;/div&gt;
          &lt;div class="cell"&gt;
              &lt;input type="number"  data-column="3" data-line="0"&gt;
          &lt;/div&gt;
          (more cells 81 in total)
  </code></pre>