CODEWITHSUNDEEP
jquery
ale
ale

Reputation: 11820

Fade in a table row when it's added to a table

I have the following code to add a new row to the end of a table:

$('.row-data:last').after('some HTML rows');

I want to use something like .fadeIn("slow") so each row fades in before it appears but I don't seem to be getting any animation:

$('.row-data:last').after('some HTML rows').fadeIn("slow");

Any ideas what I'm missing?

Thank you :).

Upvotes: 6

Views: 28470

Answers (4)

Andreybeta
Andreybeta

Reputation: 430

Add a row on top of table with a fade background:

$('button').click(function() {
  $('<tr class="anim highlight"><td>new text</td></tr>')
    .hide()
    .prependTo('table tbody')
    .fadeIn("slow")
    .addClass('normal');
});

Add background transition animation:

.anim {  
  transition: background 5s linear;
}
.highlight{
  background: #FF3333; 
}
.normal {  
  background: transparent;  
}

See http://jsfiddle.net/qdPAe/699/

Upvotes: 5

czerasz
czerasz

Reputation: 14250

Try this:

var rows = $('some HTML rows');
rows.hide();
$('.row-data:last-child').after(rows);
rows.fadeIn("slow");

Example: http://jsfiddle.net/qdPAe/1/

Upvotes: 22

Chris Kempen
Chris Kempen

Reputation: 9661

Testing in Chrome, my table row faded in great, albeit messy in other browsers. Your problem stems from not hiding the row you're adding in the first place, then not fading in the elements you wish to see afterwards (be it the row or the cells). I got the following working pretty well:

var row = jQuery('<tr><td>test</td><td>row</td></tr>');

row.hide();

jQuery('.row-data:last').after(row);

row.fadeIn(500);

Hope this helps! jQuery v1.7 BTW...

Upvotes: 3

Barry Chapman
Barry Chapman

Reputation: 6780

You cannot apply animations to table rows. Animate the TD's. It will be seamless.

//JS

function fadeRow(rowSelector, callback)
{
    var childCellsSelector = $(rowSelector).children("td");
    var ubound = childCellsSelector.length - 1;
    var lastCallback = null;

    childCellsSelector.each(function(i)
    {
        // Only execute the callback on the last element.
        if (ubound == i)
            lastCallback = callback

        $(this).fadeIn("slow", lastCallback)

    });
}

Then call it like:

fadeRow( $('selectorOfTR') );

Optionally, you can modify this for hiding/removing rows also. Just supply the remove() call in the callback portion of this script.

Upvotes: 1

Related Questions