Как добавить анимацию заполнения таблицы JQuery?

Question

[Стас Волянский]

Итак, есть матрица NxN, элементы которой нужно добавить в таблицу.
Код заполнения матрицы и ее запись в таблицу:

for (var i = 0; i < n; i++) {
        $("<tr>", a id: "a" + i.toString() }).appendTo("#table1");
        for (var j = 0; j < n; j++) {
            matrix[i][j] = parseInt(Math.random() * 100, 10);
            $("<td>", { id: "a" + i.toString() + j.toString(), text: matrix[i][j] })
                          .appendTo("#a" + i);
        }
    }

При этом визуально появление каждого элемента таблицы на экране должно отображаться отдельно (по очереди) и с участием анимации (например, fadeIn).
Когда я добавляю анимацию:

$("<td>", { id: "b" + i.toString() + j.toString(), text: matrix[i][j] }
              .fadeIn()
              .appendTo("#a" + i)

она применяется для всех <td> одновременно, и в итоге вся таблица анимируется целиком.

Answer 1

[efimenko_b]

установите таймер, и при каждой итерации накапливайте его, таким образом, у каждого элемента будет таймер больше предыдущего, что и даст постепенное появление.

Comments

[Стас Волянский]

Благодарю за идею. Поигрался с setTimeout'ом и все получилось.

[Ilya Korablev]

Стас Волянский: хочу поинтересоваться, почему же вы отметили мой ответ решением, а потом опять сняли эту отметку?

[Стас Волянский]

Ilya Korablev: стимул для того, чтобы я использовал Ваш подход в своей задаче. И в случае успеха я непременно отмечу ваш ответ решением.

Answer 2

[Ilya Korablev]

CSS

td.fade {
	display: none;
}

JQuery

$(document).ready(function(){
 $.fn.fade_img = function (ops) {
  var $elem = this;
  var res = $.extend({ delay: 100, speed: 1000 }, ops);
  for (var i=0, pause=0, l=$elem.length; i<l; i++, pause+=res.delay) {
   $elem.eq(i).delay(pause).fadeIn(res.speed);
  }
  return $elem;
 };
 $('td.fade').fade_img();
});

HTML

<table>
<tr>
<td class="fade">
<p>asdasdasd</p>
</td>
<td class="fade">
<p>asdasdasd</p>
</td>
<td class="fade">
<p>asdasdasd</p>
</td>
</tr>
</table>

Аля пример.