Attenuation in a row of a table when added to a table

Question

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

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

I want to use something like .fadeIn("slow") so that each line fades out before it appears, but I don't seem to get any animation:

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

Any ideas what I am missing?

Thanks:).

Answer 1

Try the following:

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

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

Answer 2

Testing in Chrome, my table row has disappeared a lot, although it is messy in other browsers. Your problem is that you do not hide the row that you add in the first place, and then do not fade in the elements that you want to see after that (whether it is a row or cells). I did 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 ...

Answer 3

You cannot apply animation to table rows. Animate TD. It will be smooth.

// 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 name it like this:

 fadeRow( $('selectorOfTR') ); 

Optionally, you can change this to hide / delete lines. Just put the remove () call on the callback part of this script.

Answer 4

Add a row on top of the table with the 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/