Как выполнить скользящую анимацию на столе?

Question

У меня есть таблица со многими строками (с динамическим числом), и область, видимая на экране, состоит из 4 строк.Каждая ячейка таблицы содержит изображение.Мне нужно сдвинуть эту таблицу, чтобы показать 5-ю и более строки, и я хочу анимационные эффекты при ее перемещении.

Я пробовал .slideUp() и .slideDown(), но не знаю, что именнодолжен оживить.Мой код генерации таблицы:

$().ready(function() {
for(var i = 0; i < 20; i++) {
    var $tr = $('<tr/>');
    for(var j = 0; j < 7; j++) {
        $tr.append($('<td><div><img src="pic' + (j + i * 7) + '.png" /></div></td>'));
    }
    $('tbody').append($tr);
}
});

Как я могу реально сделать эффект анимации или скольжения строк?

Answer 1

Вы не можете использовать slide анимации на table с, поскольку невозможно установить высоту строк равной 0.

См. Анимация открытия / закрытия столбцов таблицы в jQuery

Answer 2

Попробуйте это:

$(document).ready(function() {
for(var i = 0; i < 20; i++) {
    var $tr = $('<tr/>');
    for(var j = 0; j < 7; j++) {
        $tr.append($('<td><div><img src="pic' + (j + i * 7) + '.png" /></div></td>'));
    }
    $tr.hide().appendTo($('tbody')).slideDown();
}
});

UPDATE

Этот jsFiddle работает: http://jsfiddle.net/A4fn6/