突出新追加的數據

我有類似這樣的腳本：突出新追加的數據

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

如果第一次運行時，我得到10行。當它第二次運行時，它會向現有的10行添加另外10行。我如何使新添加的10行在短時間內脫穎而出？

也許將文本顏色設置爲紅色或其他顏色，然後淡出爲默認顏色而不影響舊的10行？

來源

2012-02-29 oshirowanen

_「脫穎而出的短時間內」 _ **！** – gdoron 2012-02-29 12:10:34

是的，也許在顏色文本紅色或東西，然後淡出到默認的顏色，而不會影響舊的10行？ – oshirowanen 2012-02-29 12:11:06

你可以使用一個delay()與類：

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

來源

2012-02-29 12:12:45 elclanrs

首先，我會緩衝自己的輸出，所以你只需要使用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; 
}

來源

2012-02-29 12:13:20 Jasper

我正在測試這個，它適用於第一組結果，但不適用於第二，第三和以後。對於10日第一組後的所有結果，他們保留其黃金背景。 – oshirowanen 2012-02-29 12:46:53

你可以發佈一個鏈接到你的腳本，創建一個JSFiddle，或發佈更多的相關代碼？我不確定此代碼在何處/何時運行。這聽起來像是某處出現了錯誤，因爲超時應該起作用。 – Jasper 2012-02-29 12:56:09

只需要說（創建結果的函數首先在'$（document）.ready'處運行，然後每次點擊一個按鈕就足夠了。因此，當頁面第一次加載時，它會得到10行，然後當單擊獲取更多結果的按鈕時，它會在屏幕上的現有結果中追加10個行）？ – oshirowanen 2012-02-29 12:58:26

您可以使用jQuery的fadeIn動畫：

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

這將開出新結果隱形並迅速淡入其中。

請注意'快速'是'200ms'或1/5秒的速記。如果您願意，您可以輸入精確的毫秒或其他簡寫名稱。此外，如果您想在動畫完成時執行某些操作，則可以選擇傳遞緩動（淡入的質量）和回調。

來源

2012-02-29 12:16:13

我得到一個'對象不支持此屬性的方法'錯誤信息在IE8中。 – oshirowanen 2012-02-29 12:54:51

@oshirowanen，它在抱怨什麼？此代碼應該可以工作。 – 2012-02-29 16:54:14

突出新追加的數據

回答

相關問題