表行在不工作一段时间后变得褪色

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

我有三个解决方案:纯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的解决方案:

$(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解决方案的一个问题:如果你创建多个td的定时器将从第一个创建的，所以你可能会发现元素的变化在不到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>

---

如果你对上面的任何源代码有疑问，请随时在下面评论，我会尽快回复你。

我希望这有助于，快乐编码!

$(" #发票tr ") . css("颜色","黄色").delay (4000) . css("颜色","褪色");

如果我正确理解了你的问题，就可以工作了。

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

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

最初你的表格行在页面加载时是黄色的，你想让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);
});