Javascript 如何在桌子上执行滑动动画？

我有一个表，有许多（动态数字）行，屏幕可见区域是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);
}
});

$（）.ready（函数（））{
对于（变量i=0；i<20；i++）{
var$tr=$（''）；
对于（var j=0；j<7；j++）{
$tr.append（$（''）；
}
$（'tbody'）。追加（$tr）；
}
});

如何才能真正实现动画效果或滑动行

试试这个：

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

$（文档）.ready（函数（）{
对于（变量i=0；i<20；i++）{
var$tr=$（''）；
对于（var j=0；j<7；j++）{
$tr.append（$（''）；
}
$tr.hide（）.appendTo（$（'tbody'））.slideDown（）；
}
});

更新

---

此JSFIDLE有效：

您不能在

表上使用
幻灯片
动画，因为无法将行的高度设置为0

请参见
我认为最好使用div，让jQuery特效在一个表上工作真的很难。我还认为您可以将内容划分到不同的div部分，然后放在一个div中并制作动画。相关：