Question

我的脚本与此类似：

$.each( data.d, function( index, data ) {
    $("#results").append( data.col1 + ' - ' + data.col2 + '<br />' );
});

如果第一次运行，我会得到10行。当它第二次运行时，它会向现有的十行添加另外10行。如何让新添加的10行在短时间内脱颖而出？

可能会将文字颜色为红色或其他内容然后逐渐淡出为默认颜色而不影响旧的10行？

Answer 1

您可以在课程中使用delay()：

// Something like this
$cols.addClass('red').delay(2000).removeClass('red');

Answer 2

首先，我会缓冲你的输出，所以你只需要弄乱DOM一次：

var output = [];
$.each( data.d, function( index, conflict ) {
    output.push( data.col1 + ' - ' + data.col2 + '<br />' );
});
$("#results").append(output.join(''));

然后我要做的是突出显示你新添加的DOM元素，在它们周围添加一个包装器，我可以稍后定位它以删除突出显示：

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);

然后你会得到一个带有背景颜色或设置的CSS类：

#results .highlighted {
    background-color : gold;
}

Answer 3

您可以使用jQuery的fadeIn动画：

$.each( data.d, function( index, data ) {
    var $results = $(data.col1 + ' - ' + data.col2 + '<br />');
    $("#results").append($results);
    $results.fadeIn('fast');
});

这会将新结果视为不可见并快速淡入其中。

请注意，'fast'是'200ms'或1/5秒的简写。如果您愿意，可以输入精确的毫秒或其他一些简写名称。此外，如果您想在动画结束时执行某些操作，您可以选择传递缓动（淡入的质量）和回调。

突出显示新附加的数据

3 个答案: