表格行在一段時間不工作後變淡

Question

這是我的表格行我的要求是第一次在4秒後顯示黃色的行顏色變得褪色，可以。

$('#invoice').prepend('<tr><td>Invoice</td><td>analysing</td><td>analysing</td></tr>');

Answer 1

我對你有三種解決方法：純JavaScript，jQuery的和CSS

純JavaScript解決方案：

這將創建一個新的tr並將其附加到表中，其中innerHTML設置爲td標記。幾乎與附加到表的jQuery相同，但有點不同。我已經完成了這個工作，因此我可以針對setTimeout剛創建的tr這個特定目標運行。

function demo(){ 
 
var table = document.getElementById('invoice'); 
 
var tr = document.createElement('tr'); 
 
     table.appendChild(tr); 
 
     tr.innerHTML='<td>Invoice</td><td>analysing</td><td>analysing</td>'; 
 
    // Opacity change 
 
    setTimeout(function(){ tr.style.opacity="0.5"}, 4000); 
 
    //Background only 
 
     //setTimeout(function(){ tr.style.background="rgba(255,255,0,.2)"}, 4000); 
 
}

table tr{background:yellow;opacity:1;}

<button id="create" onclick="demo()">Add</button> 
 
<table id="invoice"> 
 
<tr><td>Invoice</td><td>analysing</td><td>analysing</td></tr> 
 
</table>

更新，我已經註釋掉的背景變化和不透明度取代它，因爲它會褪色的內容以及。如果您只想更改背景，請移除不透明線並取消註釋背景線。

---

jQuery的解決方案：如果您創建多個td的計時器會：

$(document).ready(function() { 
 
    $("#create").click(function() { 
 
    $('#invoice').prepend('<tr><td>Invoice</td><td>analysing</td><td>analysing</td></tr>'); 
 
    setTimeout(function() { 
 
$('tr').css('transition', 'opacity .5s ease-in'); 
 
$('tr').css('opacity', '0.5'); 
 
}, 4000); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="create">Add</button> 
 
<table id="invoice"> 
 
</table>

一個與jQuery的解決上述問題從第一個一個創建的，因此你可能會發現的元素少於4秒改變

---

CSS解決方案：

我知道CSS是不是在這個問題上的標籤，但我相信更多解決方案更好。

我已添加支持瀏覽器，所以你不應該有任何問題，你可以測試他們刪除你不想要的。

// Jquery for Demo purposes of creating dynamic elements. 
 
$(document).ready(function() { 
 
    $("#create").click(function() { 
 
    $('#invoice').prepend('<tr><td>Invoice</td><td>analysing</td><td>analysing</td></tr>'); 
 
}); 
 
});

#invoice tr { 
 
    background:yellow; 
 
    -webkit-animation: OpFade 1s; /* Safari, Chrome and Opera > 12.1 */ 
 
     -moz-animation: OpFade 1s; /* Firefox < 16 */ 
 
     -ms-animation: OpFade 1s; /* Internet Explorer */ 
 
     -o-animation: OpFade 1s; /* Opera < 12.1 */ 
 
      animation: OpFade 1s; 
 
      animation-delay: 4s; 
 
      -webkit-animation-fill-mode: forwards; 
 
      animation-fill-mode: forwards; 
 
} 
 
@keyframes OpFade { 
 
    from { opacity: 1;} 
 
    to { opacity: 0.5;} 
 
} 
 

 
/* Firefox < 16 */ 
 
@-moz-keyframes OpFade { 
 
    from { opacity: 1; } 
 
    to { opacity: 0.5; } 
 
} 
 

 
/* Safari, Chrome and Opera > 12.1 */ 
 
@-webkit-keyframes OpFade { 
 
    from { opacity: 1; } 
 
    to { opacity: 0.5; } 
 
} 
 

 
/* Internet Explorer */ 
 
@-ms-keyframes OpFade { 
 
    from { opacity: 1; } 
 
    to { opacity: 0.5; } 
 
} 
 

 
/* Opera < 12.1 */ 
 
@-o-keyframes OpFade { 
 
    from { opacity: 1; } 
 
    to { opacity: 0.5; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="create">Add</button> 
 
<table id="invoice"> 
 
<tr><td>Invoice</td><td>analysing</td><td>analysing</td></tr> 
 
</table>

---

如果您有任何的源代碼的問題上面，請隨時在下面評論，我會盡快回復您。

我希望這有助於快樂的編碼！

Answer 2

$（ 「＃發票TR」）的CSS（ '顏色'， '黃色'）的延遲（4000）的CSS（ '顏色'， '淡出'）。;

Answer 3

工作小提琴，如果我正確地解決你的問題。

$(document).ready(function() { 
    setTimeout(function(){ 
jQuery("tr").fadeOut("slow"); 
}, 4000); 
}); 

https://jsfiddle.net/oemhLn7n/2/

Answer 4

最初的錶行是黃色頁面加載和你想要的TR爲褪色黃色意味着你可以嘗試做這個路4秒，背景色後，慢慢淡出..

CSS：

<style type="text/css"> 
    tr { 
    background:yellow; 
    } 
</style> 

HTML：

<table> 
<tr><td>Invoice</td><td>analysing</td><td>analysing</td></tr> 
</table> 

的Jquery：

$(document).ready(function() { 
setTimeout(function() { 
    $('tr').css('transition', 'background .5s ease-in'); //will make things fade in slowly 
    $('tr').css('background', '#ffffbb'); //faded color 
}, 4000); 
});