Question

I have a table with and many (dynamic number) rows, and the screen visible region is 4 rows. Each table cell contains an image. I need to slide this table to show the 5th and more rows, and I want the animation effects when sliding it.

I have tried .slideUp() and .slideDown(), but I don’t know what exactly I should animate.
My table generation code is:

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

How can I really do an animation effect or sliding rows?

Answer 1

You can´t use the slide animations on tables because it´s not possible to set the height of rows to 0.

See Animating opening/closing of table columns in jQuery