CODEWITHSUNDEEP
javascriptjqueryhtml-table
Romulus Urakagi Ts'ai
Romulus Urakagi Ts'ai

Reputation: 3870

How to perform sliding animation on a table?

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?

Upvotes: 0

Views: 3110

Answers (2)

Stefan
Stefan

Reputation: 5672

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

Upvotes: 1

MartinHN
MartinHN

Reputation: 19772

Try this:

$(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

This jsFiddle works: http://jsfiddle.net/A4fn6/

Upvotes: 0

Related Questions