stasphere
@stasphere
Студент. 4 курс.

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

Итак, есть матрица 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> одновременно, и в итоге вся таблица анимируется целиком.
  • Вопрос задан
  • 527 просмотров
Решения вопроса 1
@efimenko_b
установите таймер, и при каждой итерации накапливайте его, таким образом, у каждого элемента будет таймер больше предыдущего, что и даст постепенное появление.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
swipeshot
@swipeshot
Учусь на ошибках.
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>


Аля пример.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы