Highlighting newly appended data - jquery-ui

Question

I have script similar to this:
$.each( data.d, function( index, data ) {
$("#results").append( data.col1 + ' - ' + data.col2 + '<br />' );
});
If this runs the first time, I get 10 rows. When it runs the second time, it adds another 10 rows to the existing ten rows. How do I make the newly added 10 rows stand out for a short period of time?
Maybe colour the text red or something then fade out to the default colour without affecting the old 10 rows?

Answer 1

You could use a delay() with a class:
// Something like this
$cols.addClass('red').delay(2000).removeClass('red');

Answer 2

First, I would buffer your output so you only have to mess with the DOM once:
var output = [];
$.each( data.d, function( index, conflict ) {
output.push( data.col1 + ' - ' + data.col2 + '<br />' );
});
$("#results").append(output.join(''));
Then what I would do to highlight your newly added DOM elements is add a wrapper around them with a class that I can target later to remove the highlight:
var output = [];
$.each( data.d, function( index, conflict ) {
output.push( data.col1 + ' - ' + data.col2 + '<br />' );
});
$("#results").append('<div class="highlighted">' + output.join('') + '</div>');
var timer = setTimeout(function () {
$('#results').children('.highlighted').removeClass('highlighted');
}, 5000);
And then you would just have a CSS class with a background-color or something set:
#results .highlighted {
background-color : gold;
}

Answer 3

You can use jQuery's fadeIn animation:
$.each( data.d, function( index, data ) {
var $results = $(data.col1 + ' - ' + data.col2 + '<br />');
$("#results").append($results);
$results.fadeIn('fast');
});
This will start out the new results as invisible and quickly fade them in.
Note that 'fast' is shorthand for '200ms', or 1/5 of a second. You can put in exact milliseconds or some other shorthand names if you prefer. Also, you can optionally pass an easing (the quality of the fade in) and a callback if you want to do something when the animation is finished.