Question

这是我的表格行我的要求是第一次在4秒后显示黄色行，颜色变淡了。如果可能的话。

＆＃13;

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

＆＃13;

Answer 1

我有三种解决方案：纯Javascript ， jQuery 和 CSS

纯Javascript解决方案：

这是创建一个新的tr并将其附加到表格，并将innerHTML设置为td标记。几乎与附加到表中的jQuery相同，但有点不同。我已经这样做了，因此我可以定位刚为tr创建的特定setTimeout。

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>

更新，我已经注释掉了背景更改并将其替换为Opacity，因为它也会淡化内容。如果您只想更改背景，请删除不透明度线并取消注释背景线。

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>

如果您对上述任何源代码有任何疑问，请随时在下方发表评论，我会尽快回复您。

我希望这有帮助，快乐编码！

Answer 2

$（＆＃34; #invoice tr＆＃34;）。css（＆＃39; color＆＃39;，＆＃39; yellow＆＃39;）。延迟（4000）.css（＆＃39; color＆＃39;，＆＃39;褪色＆＃39）;

Answer 3

如果我顽固地歪曲你的问题，那就是工作小提琴。

select * from (
SELECT * from job order by rand() ) tbl
 group by group_id ;

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

表格行在一段时间后不起作用

4 个答案: