jQuery - 如何在桌子上執行滑動動畫？

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

您不容使用上table S上的slide動畫，因爲it's不可能設置行的高度爲0.

請參閱Animating opening/closing of table columns in 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/